Accomplish Your Goals

My Notes

This app is here to help you and your friends track your goals. You can see how they are doing with their goals and support them on their journey. They will be able to do the same for you. You can earn achievements as you accomplish your goals and help your friends.

How to run

This app is currently not being hosted on a webpage. The database that is used on the backend may also get shut down due to inactivity. Please contact the owner (sheevpa1patine1024@gmail.com) if there are issues with the database.

• Download the repository into a local directory
• Open the project folder in a terminal
• Navigate to the service directory
• Run node index.js to start the backend
• Navigate to the root directory
• Run npm run dev to start vite
• Press o on the keyboard to open the website in your browser

Please note that this is running locally on your computer. You can still add friends and they will see the friend request but the websocket to make it immediately update will not work.

🚀 Specification Deliverable

For this deliverable I did the following:

• Proper use of Markdown
• A concise and compelling elevator pitch
• Description of key features
• Description of how you will use each technology
• One or more rough sketches of your application. Images must be embedded in this file using Markdown image references.

Elevator pitch

Remember that time you actually accomplished all of your goals? Yeah, me neither. Well, being accountable will help you accomplish more of them. This app intends to assist you in realizing additional goals by aiding you track progress and find friends to cheer you on. Earn accolades by being consistent with your goals and by helping other users stay motivated. See other people's achievements as they do the same. Now you have a community to help you carry out your aspirations.

Key features

• A place to track your goals
• Add friends and see their goals
• See achievements you can earn
• Login using HTTPS
• See other's achievements in real time

Technologies

I am going to use the required technologies in the following ways.

• HTML - 4 pages in HTML.
• CSS - Style that will fit the user's screen.
• React - Login, see friend's progress, add new goals.
• Service - Chat service to encourage your friends!
• DB/Login - Store users and their goals, save their friends.
• WebSocket - See other's achievements in real time.

🚀 AWS deliverable

For this deliverable I did the following:

• Server deployed and accessible with custom domain name - My server link.

🚀 HTML deliverable

For this deliverable I did the following:

• HTML pages - I have 4 complete pages for my webpage to login, track goals, add friends, and see achievements.
• Proper HTML element usage - I used various HTML elements to represent what I was trying to display on the page. This includes text, images, links, headers, and footers.
• Links - I have links to each of my pages in the header of each page. I also have a link to my github in the footer of each page.
• Text - Text is used as a placeholder for many future features of my page.
• 3rd party API placeholder - The button to encourage a friend will eventually have a 3rd party API that sends an email to that friend.
• Images - I have images for the achievements
• Login placeholder - My home page is a login screen that does nothing yet.
• DB data placeholder - The login screen will store information. Each user will have data stored about them like their goals, friends, and achievements.
• WebSocket placeholder - I will have a websocket that tells people when their friends have gotten a new achievement or started a new goal in real time.

🚀 CSS deliverable

For this deliverable I did the following:

• Header, footer, and main content body - Navigation and flex displays.
• Navigation elements - These are displayed at the top of the page.
• Responsive to window resizing - I remove the navigation and footer when the screen height is too small. I also remove some side padding when there isn't enough width.
• Application elements - I styled each of my elements and used bootstrap for buttons and text boxes.
• Application text content - I aligned my text using CSS
• Application images - I used CSS to set my image's size.

🚀 React part 1: Routing deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Bundled using Vite - I set it up as an NPM package. I then installed vite to use during development.
• Components - The pages are now each their own jsx file with the header and footer being its own jsx file.
• Router - The app now uses a React router to navigate between the pages. Now this is pod racing.

🚀 React part 2: Reactivity

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• All functionality implemented or mocked out - I made a lot more components. My pride and joy is the timer and streak functionality I made in the time.js file.
• Hooks - React useState is used for variables that will be displayed. useEffect is used to force the page to render certain items correctly on reload/open. This is because some items aren't formatted correctly before being passed to the component that needs them.

🚀 Service deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Node.js/Express HTTP service - Express installed!
• Static middleware for frontend - Check auth, making sure only the right goals are served up, etc.
• Calls to third party endpoints - From the friends page I call a quote service.
• Backend service endpoints - Check auth, delete goals, add goals, etc.
• Frontend calls service endpoints - The frontend now uses the backend services!

🚀 DB/Login deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• User registration - User data stored in the DB
• User login and logout - Login and out using credentials stored in DB.
• Stores data in MongoDB - Goals, friends, and requests are now stored in the DB.
• Stores credentials in MongoDB - Stores the users in the DB.
• Restricts functionality based on authentication - I always call the DB stuff after calling the check auth so unless there is a sneaky way to call DB function without using my backend endpoints, yes.

🚀 WebSocket deliverable

For this deliverable I did the following. I checked the box [x] and added a description for things I completed.

• Backend listens for WebSocket connection - Backend keeps tabs on who is active and recieves connections from active users.
• Frontend makes WebSocket connection - Indeed it connects to the backend.
• Data sent over WebSocket connection - When something should be updated for another user, the websocket tells the user's websocket to have the page render the new information.
• WebSocket data displayed - The websocket tells the page to render new information and also render a message sent from the other user's app.
• Application is fully functional - Everything should now work as intended.