Journal web application for writing down your thoughts or what happened during your day. Create a profile and start creating notes, the app has multiple features like:
- Creating and editing text notes
- Upload one or multiple images to a note
- Showing the list of notes
- Save your notes and open them whenever you want
- Create account using google or github accounts
- Deleting notes
Here is how the web app looks like :
Check the deployed site at Journal App Vite Material.
Journal App was made using the library Reactjs for building the user Interface and other utilities like react hooks, Redux and Redux Toolkit for the application state management and finally React Router v6 for routes manipulation.
On the other hand for media storage like the notes images, Cloudinary was the choosen solution. For database was used the Firestore Database from Firebase and also from Firebase was used Firebase Authentication for user authentication, supporting email, gmail and github authentication.
For devops was used GitHub Actions for running the app tests every time a commit was pushed to the main branch and ensure all the tests passed. Check the "yml" configuration file at journalapp.js.yml.
Finally for testing the app: React Testing Library and Jest.
You can use this project by three ways:
- Create a new project on Firebase console and configure the Firestore Database to
write if true(allow anyone to write) and also configure the Authentication sign-in options to "Sign-in with Google", "Sign-in with GitHub", and with "Sign-in with Email and password". - Prepare your firebase "app credentials and keys" for the following step. Also create a Cloudinary account and get your "credentials" to connect the Journal App with Firebase and Cloudinary.
- Use the template file for environment variables in root directory .env.development.template to complete the credentials of firebase and cloudinary. Do not forget to rename it to .env.development.
- Open a command terminal in the project directory and run the command npm install to install the main dependencies of the project.
- Save all and use the npm start command in the terminal to start the project.
Note: If you already have created and configured the Firebase App and the Cloudinary account you can use those same credentials for the Test environment variables, or create a new Firebase App just for testing.
- Create a new project on Firebase console and configure the Firestore Database to
write if true(allow anyone to write) and also configure the Authentication sign-in options to "Sign-in with Google", "Sign-in with GitHub", and with "Sign-in with Email and password". - Prepare your firebase "app credentials and keys" for the following step. Also create a Cloudinary account and get your "credentials" to connect the Journal App with Firebase and Cloudinary.
- Use the template file for test environment variables in root directory .env.test.template to complete the credentials of firebase and cloudinary. Do not forget to rename it to .env.test.
- Open a command terminal in the project directory and run the command npm install --include=dev to install both the main dependencies and the development dependencies of the project.
- Save all and use the npm test command in the terminal to test the project.
The web app is deployed using Vercel, check the deployment at Journal App Vite Material.
Check all the project dependencies in the package.json file
In the project directory, you can run:
Runs the app in the development mod, use localhost to view it.
Launches the test runner in the interactive watch mode.