Trip Collaborator: Finalising Location Made Easy

Overview of My Submission

The project is called 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 planning for our next getaway, we normally have lots of places in our minds. These suggestions we either get 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 the location. There are various features that can be implemented along with these.

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

Screenshots of the application

Login Page

Feed Home page

Referred Feed Home page

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

Trip-Collaborator

Users Login/Password:

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

Architecture Diagram

Overall Architecture Diagram

Flow Diagram

API Diagram

Video Explainer of My Project

Link to Code:

https://github.com/apoorvtomar2222/trip-collaborator

How does it work?

Store the data

We have used Redis as our database. Redis supports various data types, 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 the other for the 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 a repository which help us in creating the entity used to store the data. The following is the method used to save data in the 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 an interface for keeping track of stored data.

Read the data

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

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

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 the search function provided. For filtering the data we have where and or function where we can provide our conditions.

Additional Resources / Info

• lodash

• redis-om

• sass

• next

References

• Check out Redis OM, client libraries for working with Redis as a multi-model database.

• Use RedisInsight to visualize your data in Redis.

• Sign up for a free Redis database.!