Bula Bars is a fullstack web application built using the PERN stack (PostgreSQL database, Express, React, Node.js, and visual design with Tailwind CSS) that allows users to discover kratom and kava bars in their vicinity. Are you looking for a nice place to relax, do some work, or enjoy events/live music? Try a kava bar! Currently, the database is manually populated and so it is limited to kava bars around the Tampa, Florida area.
This project is organized into two main folders:
-
backend: Contains the server-side code built with Node.js, Express.js, and PostgreSQL. It handles data storage, user authentication, and API endpoints.
-
frontend: Houses the client-side code built with React. It provides the user interface for interacting with the application.
-
User Authentication: Users can create accounts, log in, and securely authenticate themselves. User sessions are stored with persistence using cookies so that the user stays logged in across the entire website. I need to add basic features to let users log out as well.
-
Hashed Passwords: When users create an account, their password will be hashed in the database. This adds a fundamental level of security that, although not perfect, is vital for any web application. Making this work was one of my bigger struggles but I learned a lot!!!
-
Location-based Search: Bula Bars utilizes geolocation to find nearby kratom and kava bars based on the user's current location. This feature is still at a minimum viable product stage but with some time spent toward improving my database, I can make this feature a helpful part of the application (as was intended for the "final product"). As mentioned below, this was achieved by leveraging an open-source JavaScript mapping library called "Leaflet JS."
-
Detailed Listings: Each bar listing includes essential information such as name, address, contact details, business hours, user reviews, and more.
-
User Reviews and Ratings: Logged in users can leave reviews and rate the bars they've visited, providing valuable insights for others.
-
Interactive Maps: Leaflet JS map that lets users navigate to their chosen bar.Leaflet JS is an open source mapping library. I would like to add a search feature so that users can see all the local results on the interactive map.
-
Responsive Design: Using Tailwind CSS, this app is accessible for large screens and mobile devices.
Before you start, make sure you have the following software installed:
- Node.js and npm: Node.js Downloads
- PostgreSQL: PostgreSQL Downloads
- Navigate to the
backend
folder:cd backend
- Install backend server dependencies
npm install
- Create a PostgreSQL database and configure the connection details in config/db.js
npx sequelize-cli db:migrate
- Start the backend server ... All the endpoints are currently inside of the server.js file in the backend.
node server.js
- Navigate to the
backend
folder:cd backend
- Install frontend client dependencies
npm install
- Start the frontend development server. This will start up the React frontend
npm start
- The Bula Bars application should now be running locally, open your browser and navigate to local host.
- React.js
- Node.js
- Express.js
- PostgreSQL relatonal database
- Tailwind CSS
- Express sessions
- User persistence
- bcrypt password hashing
- Leaflet JS interactive map
If you have any questions, suggestions, or contributions please feel free to reach out to me at [hayden.garry99@gmail.com].
Have fun exploring your kratom and kava bars with Bula Bars! Sip Responsibly!