Purpose: to provide a space for a registered user to make short gratitude journal entries and click a simple button for “overall mood" to keep track of their day and what they are grateful for.
You can access a working prototype of the React app here: https://gratitude-journal-capstone-client.vercel.app/ and Node app here: https://gratitude-journal-server.herokuapp.com/
This app is for two types of users: a visitor and a logged-in user.
- as a non-registered user
- I want to understand what I can do with this app (or sign up, or log in)
- so I can decide if I want to make an account and use it
- as a non-registered user
- I want to create a username and password
- so I can create my account and use the service.
- As a registered user
- I want to log in to my account
- So I can create an entry or view my saved entries
- As a registered user
- I want to be able to nagivate to different sections of the app
- So I can easily see all of the features
- As a registered user
- I want to fill out a new journal entry
- So I can keep track of what I am grateful for each day
- As a registered user
- I want to view my all of my journal entries
- So I can notice patterns in my mood and keep track of how I'm feeling
- As a registered user
- I want to update/change my password when I forget it
- So that I can log back into my account
Landing/Login Page |
---|
Sign Up Page |
Login Page |
New Entry Page |
All Entries Page |
Landing/Login Page |
---|
Sign Up Page |
Login Page |
New Entry Page |
All Entries Page |
The app's functionality includes:
- Every User has the ability to create journal entries
- a journal entry will consist of: a bullet point list and an "overall mood" button
- inputs
- gratitude points
- overall mood (choice between 3)
- output
- finished journal entry
- inputs
- Index.js (stateless)
- App.js (stateful)
- header.js (stateless)
- landing-page.js (stateful) - gets the "prop name" and the "callback prop name" from the App.js
- login.js (stateful) -
- signup.js (stateful) -
- navbar.js (stateless) -
- all-journal-entires.js (stateless) -
- create-journal-entry.js (stateful) -
- button.js (stateless) -
- App.js (stateful)
-
users
- id
- user_name (minimum 6 characters)
- password (minimum 8 characters, 1 uppercase, 1 number)
- first_name (minimum 2 characters)
- last_name (minimum 2 characters)
-
journal_entries
- id
- user_id
- title (varchar)
- date (date)
- bullet_1 (varchar)
- bullet_2 (varchar)
- bullet_3 (varchar)
- mood (varchar)
- is_public (default: false)
- Front-End: HTML5, CSS3, JavaScript ES6, React
- Back-End: Node.js, Express.js, Mocha, Chai, RESTful API Endpoints, Postgres
- Development Environment: Heroku, DBeaver
API Documentation details:
- get all users => /api/users
- get users by id => /api/users/:user_id
- get all entries => /api/entries
- get entry by id => /api/entries/:entry_id
- post new user => /api/users
- post new entry => /api/entries
- post auth login => /api/auth/login
App is built to be usable on mobile devices, as well as responsive across mobile, tablet, laptop, and desktop screen resolutions.
This is v1.0 of the app, but future enhancements are expected to include:
- Forgot Password
- Color code entries based on mood
- Publicly show some entries
- More than 3 gratitude points (a + component)
- Add/upload photos
- Weather report for your location (mood based on weather)
- Send reminders to jounral
- Separate past entries into weeks
Use command line to navigate into the project folder and run the following in terminal
- To install the node project ===> npm install
- To migrate the database ===> npm run migrate -- 1
- To run Node server (on port 8000) ===> npm run dev
- To run tests ===> npm run test
- To install the react project ===> npm install
- To run react (on port 3000) ===> npm start
- To run tests ===> npm run test