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
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.!
Comentários