top of page
dp.jpg

Hi, thanks for stopping by!

Hope you are getting benefitted out of these articles. Don't forget to subscribe to the Newsletter where we will serve you with the curated content right at your mailbox.

Let the posts
come to you.

Sponsor the Author.

Trip Collaborator: Finalising Location Made Easy

Updated: Feb 10, 2023

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

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:

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


17 views

Comentários


bottom of page