skald1311 / cooksta Goto Github PK

Cooksta

A food-related full-stack social media platform
LIVE DEMO

Report Bug · Request Feature

After many disappointments with food not matching its menu picture, I decided to develop a food-focused social media app. This platform enables users to upload photos of food along with relevant information such as names and locations, ensuring others won't encounter similar disappointments.

Key Features:

1. Authentication (sign up, log in, log out): Utilizes a context API to provide every component with knowledge of the current user's authentication status. The app restricts access to non-signed-in users, redirecting them to the login/signup page. Upon logging in, the frontend sends the username and password to the backend for authentication. Signing up involves sending new account data to be added to the database.

2. Feed: To enhance user experience, fake data from real restaurants/people is integrated to simulate activity. Although an infinite scroll feature is not implemented due to the limited data, each post on the feed offers interactions such as redirection to the user's profile page by clicking the username, and to the post page by clicking the post image. Liking a post is facilitated by tapping the heart symbol.

3. Ability to create new posts and like posts: The frontend sends post information to the backend for database inclusion, updating the user's post array with the post ID. Liking a post is accomplished by sending a request from the frontend, with the backend updating the post's like count.

4. View your own and others' profiles: Features include hover-over functionality to display like counts on posts, and tapping on a photo leads to the full post.

5. Account updating features (changing password, profile picture, and description): Utilizes the same backend communication pattern as previous features, enabling users to modify account details seamlessly.

6. Dark mode and light mode: Dark mode and light mode: Implemented using CSS variables adjusted via the class attribute in the HTML tag, allowing for a dynamic change in appearance.

Application Architecture: The frontend is constructed using ReactJS and JavaScript, while the backend Django functions as an API facilitating communication with the hosted MongoDB Atlas cluster. For production hosting, the frontend is deployed on Netlify, and Vercel hosts the backend. Due to complications with SSL certificate, I decided not to host the backend on an AWS EC2 instance anymore. Analyzing the queries, I noticed repetitive querying of the username field, prompting me to create an index for it to enhance query efficiency. Upon comparing query times before and after implementing the index, there was an average reduction of 55%, with query times dropping from 900ms to 400ms.

The inspiration for this app was also drawn from a video game called "Dave the Diver."

(back to top)

Frontend:

Backend:

(back to top)

LIVE DEMO HERE

Since the application's data resides on MongoDB Atlas, you'll require the connection URL to access the database. However, as the URL contains my account's password, for security reasons, I haven't included the db_connection.py file. If you wish to host it locally, please reach out to me via LinkedIn, and I'll assist you in obtaining your own db_connection.py

Once you've obtained db_connection.py, you can follow these next steps

1. Click the green button

2. Download ZIP

   

3. Extract the file

   Make sure all of the files are in the same folder!!!

4. Paste the db_connection.py file into the "backend" folder

5. Go into the "backend" folder

   cd backend

6. Create a virtual environment and activate it

   python -m venv .venv
   . .venv/Scripts/activate

   Some systems might be different (python3 rather python; . .venv/bin/activate rather than . .venv/Scripts/activate)

7. Install backend dependencies

   pip install -r requirements.txt

8. Run the server

   python manage.py runserver

   In the terminal, you'll see a link, but it's not for the actual app. It's just for the backend server, so please refrain from clicking on it.

9. Open up a new terminal and cd into the "frontend" folder

   cd frontend

10. Install frontend dependencies

    npm i

11. Run frontend server

npm run dev

You'll find a link in the terminal. Hold down Control and left-click on the link to access it. Enjoy!

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Duong Hoang - LinkedIn

Project Link: cooksta.netlify.app

(back to top)