Trip Collaborator [#3]: Finalising Location Made Easy .
Tags: redishackathon, nextjs, react
Published: 2022-08-22 15:38:00

[Instructions]: # (To submit to the Redis Hackathon on DEV, please fill out all sections. DELETE ALL NOTES, reminders, and guidelines before publishing.)


## Overview of My Submission

The project is called as **Trip Collaborator.**

### About the project.
Trip Collaborator is an application which will help solve the biggest problem of booking a trip amongst friends, family and relatives.

### Problem Statement.

While we are planning for our next getaway, normally we have lots of places in our mind. These suggestion we either get it from various  platforms but managing them is a bit of a concern.

The thought behind Trip Collaborator is to make that hustle easier, two users should easily be able to share location. There are various features that can be implemented along with these.

I will add scope to which this project can be extended in scope section. If anyone interest can submit a pull request.

### Screenshots of the application

#### Login Page

![Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8h2kir57sjiwlhewxpp.png)

#### Feed Home page

![Feed Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo1v6vokxfh43xp436gf.png)

#### Referred Feed Home page

![Referred Feed Home page!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ky8cnk772nkm3vqhy42.png)
 
---

### Submission Category
MEAN/MERN Mavericks


### Language Used

### Frontend:
JavaScript, React, fetch(ajax), Redis-OM, sass, lodash
### Backend: 
JavaScript, Next.js, Redis-OM
### Utility Tool;
Redis-insight

---

### Deployed Link

#### Deployment Service Used: [Vercel](https://vercel.com/) 

[Trip-Collaborator](https://collaborator-two.vercel.app/internal/Feeds)

**Users Login/Password:**

**User 1**:  Apoorv(username)/Apoorv(password)
**User 2**: Apoorv Tomar(username)/ ApoorvTomar(password)

---

### Architecture Diagram

#### Overall Architecture Diagram

![Overall Architecture Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3czqcf34nbhhhrj5t1lm.png)

#### Flow Diagram

![Flow Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epp1tn4z0q9sg52tk8ge.png)

#### API Diagram
![API diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/es49tq9ybtvl2a1p3hgi.png)
 
### Video Explainer of My Project

{% embed https://youtu.be/lOXjM4dx1Zo %}

### Link to Code

{% embed https://github.com/apoorvtomar2222/trip-collaborator %}

--- 
### How it works?

### Store the data
We have used Redis as our database. Redis supports various datatypes, but we will be storing the data as JSON. This will help us replicate the most common no sql database nowadays i.e. MongoDB.

The data in redis will have two schemas as follow. One for location and other for user.

#### Location Schema

```
    Location,
    {
        name: { type: 'string' },
        location: { type: 'string' },
        image: { type: 'string' },
        description: { type: 'text', textSearch: true },
    }
```
#### User Schema

```
  User,
    {
        name: { type: 'string' },
        password: { type: 'string' },
        relatedItems: { type: 'string[]' }
    }
```

As we have used redis-om so for storing the data we have to create repository which we help us in creating the entity used to store the data.
Following is method used to save data in location

```
export async function addLocation(data) {
    await connect();
    const repository = client.fetchRepository(schema)
    const car = repository.createEntity(data);
    const id = await repository.save(car);
    return id;
}
```
Following is the screenshot from Redis Insight, which is a UI tool giving a interface for keeping track of stored data.

![Redis Insight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhoicroczzs8d1us9waa.png)
 

### Read the data

Now once we were successful in storing the data to our redis cloud database. It was time to query the data. 

We have fetched the data using following command. The once which we will be discussing is about the search functionality that can be found on feed page as show in screenshot below.

![Feed Page Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykl6pphy21v1vhbcimvb.png)


```
export async function searchLocation(q) {
    await connect();

    const repository = new Repository(schema, client);
    let locations;
    if (q) {
        locations = await repository.search()
            .where('name').eq(q)
            .or('location').eq(q)
            .or('description').matches(q)
            .return.all();

    } else {
        locations = await repository.search().return.all();
    }


    return locations;
}
```

Here you will observe we have used search function provided. For filtering the data we have where and or function where we can provide our conditions.

--- 

### Additional Resources / Info

- [lodash ](https://www.npmjs.com/package/lodash)
- [redis-om ](https://www.npmjs.com/package/redis-om)
- [sass ](https://www.npmjs.com/package/node-sass)
- [next ](https://www.npmjs.com/package/next)

### Collaborators

As a Sole Participant of this project, I have tried my level best to build the entire system with outmost precision.

### References

* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._!
 
---

### About The Author
Apoorv Tomar is a software developer and part of [Mindroast](https://mindroast.com/). You can connect with him on [Twitter](https://twitter.com/apoorvtomar_), [Linkedin](https://www.linkedin.com/in/apoorvtomar/), [Telegram](https://t.me/ApoorvTomar) and [Instagram](https://www.instagram.com/apoorvsinghtomar/). Subscribe to the [newsletter](https://www.mindroast.com/newsletter) for the latest curated content. Don’t hesitate to say ‘Hi’ on any platform, just stating a reference of where did you find my profile.