Barlet

A social media app to post about and review bars in your area

Home Page

Live-feed

Profile Page

Front-End Requirements:

• React/Redux.
• Must have reducers, actions, action types
• Must use styled components, CSS framework, or vanilla CSS.
• Must be mobile responsive for 3 break points. Computer, tablet, phone.
• Must contain color swatches and theme for your application.
• All input fields must be controlled either with the redux store or local state. All important data must be stored in the redux store.
• Deploy the site.

Back-End Requirements:

• Properly handle data in a database of some-sort.
• Use Express Router to break up files.
• Create the routes that make sense for the functionality you would like to use on your application. CRUD.
• Login/Authentication using Passport/JWT/Cookies.
• Deploy on Elephant SQL / DigitalOcean or AWS.
• Encrypt passwords sent to the backend using Bcrypt.

Non-code related Requirements:

• Create a medium article and link it to your repo.
• Create a proper readme for your application and the people who contributed to it.
• Record your presentation of you going through the application. Should be roughly 2–5 min max time. Deploy to Youtube and link in readme and medium article.

Goal of the Project:

This was a project that I wanted to build out for a very long time, the main goal of the project was to get an alpha version of the project up and running for Demo Day at my bootcamp. I wanted to get out of my comfort zone and implement features that I had no prior experience working with. Such features included rendering nearest bar locations using React-Google-Maps. Another included incorporating an infinite scroll using the Intersection Observer API.

Project Timeline:

• Start: 06/14/2021
• Demo Day: 06/28/2021

Color Palette:

Color Palette

Client-Side:

• React/Redux
• React Router
• Styled Components
• React Toastify
• Font Awesome
• Antd Design Library
• React Player
• React Google Maps API

Server-Side:

• Node.js
• Express.js
• JSON Web Token (JWT)
• PostgreSQL
• Sequelize
• Bcrypt
• Multer

NPM Packages:

Client:

• “react-redux”: “⁷.2.4”
• “react-router-dom”: “⁵.2.0”
• “react-scripts”: “4.0.3”
• “react-toastify”: “⁷.0.4”
• “redux”: “⁴.1.0”
• “redux-logger”: “³.0.6”
• “styled-components”: “⁵.3.0”
• “@ant-design/icons”: “⁴.6.2”
• “@fortawesome/fontawesome-svg-core”: “¹.2.35”
• “@fortawesome/free-solid-svg-icons”: “⁵.15.3”
• “@fortawesome/react-fontawesome”: “⁰.1.14”
• “@react-google-maps/api”: “².2.0”
• “react-player”: “².9.0”

Server:

• “bcrypt”: “⁵.0.1”,
• “cors”: “².8.5”,
• “dotenv”: “¹⁰.0.0”,
• “express”: “⁴.17.1”,
• “jsonwebtoken”: “⁸.5.1”,
• “sequelize”: “⁶.6.2”,
• “sequelize-cli”: “⁶.2.0”
• “multer”: “¹.4.2”,
• “pg”: “⁸.6.0”

Challenges:

• Creating my own custom hamburger menu and having it render at a certain break-point.
• Deciding when it was appropriate store a state variable in the Redux store or just store it in local state.
• Having the make the decision to not use Formik for form submission. It was taking up too much time.
• There was a learning curve when it came to using Multer for photo uploads. I had to learn how to properly store them on the back-end and how to access them from the front-end.
• Working with Google Maps API was very difficult and it took up the most time in this project. The biggest challenge of setting it up was allowing geo-location search while also allowing a user to freely scroll way and render new results.
• Found a notable bug, while working on the live-feed feature I noticed that all posts and reviews would all show that they belonged to the logged in user. To get around this I made a new end point that will check user-ID of the post and render its proper owner.
• Infinite scroll feature was also very difficult to implement. At first I was planning to use React-Infinite-Scroll-Component, but it didn’t work well with how I paginated my database. So I then decided to implement it manually using the Intersection Observer API along with React Hooks (useState, useEffect, useRef, useCallback).

Successes:

1. The project is by no means finished, but I was able to establish a general layout for the app and implement new features that I’ve never worked with before.
2. I was already familiar with using JWT Authentication so I was able to save a lot of time implementing the login and register features.
3. Became familiar with the useRef and useCallback hooks.
4. Have a better understanding the Google Maps API and the Intersection Observer API.
5. I understand how to upload photos and store them on the server.

Future Updates:

• Add a feature to allow users to follow one another and keep track of follower count.
• Add direct messaging to so users that follow each other can have private conversations.
• Make it so that users can tag their location on posts and reviews if they choose to.
• Along with google’s rating I would like to map hot spots to locations that are frequently getting tagged.
• Instead of storing pictures on the server I would eventually like to switch over to using a 3rd party such as Imgix or Cloudinary. This will allow for more fluent image resizing.
• Use Moment.js or another time management library to render dates on each post and review.
• Once the project gets big enough, I plan to either buy more data storage through ElephantSQL or switch to a different provider.

GitHub repo can be viewed here