Trip Collaborator [#3]: Finalising Location Made Easy .

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

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

---

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

apoorvtomar2222 / trip-collaborator

This project is a prototype for making a system which is used by peers for deciding for there next trip.

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

Feed Home page

Referred Feed Home page

---

Tech Stack (Language Used)

Frontend:

JavaScript, React, fetch(ajax), Redis-OM, sass, lodash

Backend:

JavaScript, Next.js, Redis-OM

---

Architecture Diagram

Overall Architecture Diagram

Flow

…

View on GitHub

---

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.

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.

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
• redis-om
• sass
• 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, 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.!

---

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.