LowKation

ThumbNail :)
Page View Example 1
Page View Example 2
MVC Model Diagram :)
From us to you, Thank you!

💫 Inspiration

A gorgeous, serene cafe hidden in the back alley of a street in Italy. An old abandoned building, with graffitti sprawled across its walls, tucked away in the back of an industrial city.

Photographers and Adventurers. We’re a group of friends who share many common interests and exploring new places, travelling and photography are common passions within all of us. However, when it comes to finding new places, there are lost treasures, or hidden gems across the world, and we wanted to make a tool that allows us to centralize these locations, all while gate-keeping these precious treasures.

😮 What LowKation does

LowKation, short for Lowkey Locations, is a progressive web application where users can sign up and contribute to an ever-growing collection of hidden locations in the world, and view others’ postings as well. With a rank-based system, a user can rise up 5 levels, unlocking more and more locations! Locations’ postings increase in rank through gaining likes, visits and saves!

🔨 How we built it

We’re always trying to learn something new! For this app, we tried to implement an MVC (Model, View, Controller) application structure. For the view, we’ve decided to use React that communicates with a controller using Node.js and Express.js, which interacts with a model database which is Firebase for this web application. With this model, everything has been modularized and we’ve found it very easy to create endpoints and implement functionality with great ease. Ultimately, we’ve used the “FERN” stack or as we’d like to call it the “NERF” stack. It’s NERF or nothin’!

😰 Challenges we ran into

A major issue with the backend was the integration of Firebase and sending data as arrays or objects from the Firestore collections.
Another issue with the backend with middleware is setting up the Node server with the React server as there was a problem with the proxy.
Furthermore, as the app scaled in the prototype, developing the front end React view was becoming increasingly heavier.
Finally, the biggest issue was to deploy the server to Heroku.

😤 Accomplishments that we're proud of

The moment we were able to connect and export data from Firestore to the Node server, the MVC structure was established and React connected with the Node server, we all literally screamed with happiness. Afterall, this is the first experience for many of us and first experiences are to always be celebrated.

🧠 What we learned

We learned…

How to scale our idea for the prototype
The hackathon process (most of us are new)
How full-stack applications work
An approach to modularize solutions

💙 What's next for LowKation

Continuing this project, we can upgrade to Tailwind and Sass for faster styling approaches especially with reused or multiple dynamically mapped components for the styling. Next, we can focus on trying to deploy the app to gain valuable experience and having something tangible to share with the world :)

Built With

Submitted to

MapHacks
- Winner First Overall

Created by

I designed the entire UI, made the video, and worked on the frontend for css and react. This was the first time I encountered many new frameworks and I believe we did really well!

Shaiza Hashmi
I was also responsible in integrating our database and making sure it can be properley accessed and used. I had to learn a lot of firebase on the fly as well and I am very impressed we were able to get it connected to the back end and be able to use it effectivley

Lavan Raveendrakumar
I helped co-ordinate the team, glued all ends, creating the MVC back-end model, created components of the front-end with a sprinkle of database work. This is the first time I've worked with a team for a hackathon project, but I think we've done really well :)

Saqif Abrar
I helped to route React components together, implement state management to the components, created server requests to integrate the front end and back end together, and integrated a Google Maps map into the React app dynamically. This was the first time I used React in a full stack production and I am so proud that I was able to accomplish this and so much more with my team!

Ibrahim Rather
I helped to create and integrate google firebase as the backend database as well as deployment. I have never worked with firebase before so I'm proud of myself for getting so much progress in such little time!

Rithik Choudhary