Geek Culture
Published in

Geek Culture

Trip Collaborator | Technical Blog.

Building a product using Nextjs and Redis.

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 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 is interested 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

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 helps us in creating the entity used to store the data.
The following is the method used to save data in a 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 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.

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store