Video Presentation Link: https://youtu.be/EcYRgRpDp6E
App Link: https://thenapchat.herokuapp.com/
Introduction to my CS50 final project: Napchat, a.k.a Napp, is social media web app that incentivizes sleep-deprived college students to develop healthy sleep schedules by allowing them to log their sleep, maintain a streak, and compete with their friends via a weekly leaderboard on who has the best sleep schedule.
To configure and use the project: The project requires no compiling. All you have to do to run it is to download the whole app directory and click "run app" in app.py in VSCode. However, I also linked the deployment link https://thenapchat.herokuapp.com/; you can either run it locally on VSCode (recommanded) or click the Heroku link (I'm not sure if it requires pre-authorization with CS50 staff so I recommend just sticking with VSCode). Please download all the code files, open them in VSCode, and click on "run code" in app.py, which runs the app locally on the machine. Note that I used some python libraries (such as Pyrebase4), which must be pip installed onto the local machine before the app can be ran. To actually use the app, the user should click on the "sign up" button on the login page, create an account using an email and password (which must be at least 6 characters long). The user can use the same email and password to log in every time they want to use the app. Feel free to use the already-made account I used for testing: [email protected], password: 111111, to test specific functionalities.
After creating the account, the user is directly logged in and is redirected to the "set profile" page, where the user should enter their name, birthday, and daily sleep goal. After entering the information, the user is able to see their completed profile displaying their name, email, age, and daily sleep goal. (If see internal server error, which could occasionally happen via the deployed link, the user can just refresh or click to go back one step). The user can use the navigation bar to access other parts of the app. Clicking on "Nap Track," the user is able to see their name, recommended sleep (provided based on user birthday), their sleep goal (if not set, will display a default value), their current streak (for reaching the sleep goal), and a calendar view for the current month. The current date is boardered on the calendar. For every date in the month, if the box of the date is yellow, it means sleep goal is met for that day based on the information that the user has logged. If the most current day doesn't meet the sleep goal and is white, the streak will be reset to 0.
To enter a time slept, the user can click on "New Nap" on the navigation bar. The user can log sleep by providing the date, the time they went to sleep, and the time they woke up. The user can only log sleep time for the past week: they can't log times for the future or longer than a week in the past. Once the user has logged enough sleep for a day (equal or more than the daily sleep goal), they will see that the dates for which they meet the sleep goal has turned yellow. All logged sleep hours can be displayed in the "History" tab of the nav bar. In "/history", the user see a table of all recorded nap times marked with timestamps when entered. Each row has a delete button that can delete that row of record.
The user can use "Find Nappers" tab in the nav bar to search for other users, provided that they know the other users' email and/or profile name. To test the app, the user can search for me in the search bar, using the name "Jared Hu" or my email "[email protected]" (note this will not work if the user uses [email protected] account; pending or current friends will not appear in the search result). The result with be all accounts that match the name or email entered, but since there's no other user to this app, most likely only one result will appear most of the time (check the spelling and capitalization when searching!). Once the search result appears with my/their name and email, the user can send a friend request to them via clicking on the "add friend" button. Once the add friend button is clicked, the user is redirected to the friends page, where they will see all of their pending requests sent, pending requests received, and friends. After pending request is accepted, two users become friends and can view each other's Nap Track view. A pending request or a friend can be removed by clicking on the delete button.
To test all of these social media functions, I recommend the tester make two separate accounts for testing the friend request functionalities.Or, the tester can use the account that I've provided, with email "[email protected]" and password "111111". Clicking on the "Friends" tab from this account, they will see one friend request, one pending sent request, and one friend. If the user clicks on the accept request, they can become friend with the other user. Once two users become friends, they can view each other's Sleep Track profiles. By clicking on the "Leaderboard" tab in the nav bar, the user can see a leaderboard ranking all of the user's friends and the user by their average daily sleep hours. Average sleep is calculated based on the number of hours and dates logged in the past 7 days. More logged hours in the past week doesn't necessarily transfer to a higher average hour.
Please enjoy the app! --Jared Ni, HC'25
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent