Trip Collaborator: Finalising Location Made Easy.

Build a trip collaborator project with help of Next JS and Redis.

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

Feed Home page

Feed Home Page

Referred Feed Home page

Referred Feed Home page!


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


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

Overall Architecture Diagram

Flow Diagram

Flow Diagram

API Diagram

API diagram

Video Explainer of My Project

{% embed youtu.be/lOXjM4dx1Zo %}

{% embed 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

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

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

Collaborators

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

References


About The Author

Apoorv Tomar is a software developer and part of Mindroast. You can connect with him on Twitter, Linkedin, Telegram and Instagram. Subscribe to the 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.