Personal Journal
Data Centric Development Milestone Project | Personal Journal
Demo
A live demo can be found here.
Project Purpose
The purpose of the project is to allow users to create an online journal where thay can express their memories and the feeling they had at the moment of writing the story.
UX
User Stories
As a new user you can login and can add new entries in the journal, edit entries, archive/unarchive entries and also delete entries.
Strategy
My goal was to create an user-friendly web application where users can easily add journal entries.
Scope
The scope of the application is for users to easily add new entries, edit entries or delete them.
Structure
The application is a one page app which has a login page for first time users, after login the users have a top navbar, a collapsible sidebar and the main content. To a add a new entry you need to go on the "Add entry" page or you can click on the floating button on the bottom right corner. When addding a new entry, the user can add a story and a feeling.
Skeleton
Surface
The color scheme offers a white background a dark navbar and footer. The entries are using the card component with a white background.
Technologies
- HTML
- CSS
- Materialize (v1.0.0)
- Javascript and jQuery (v3.5.0)
- MongoDB Atlas
- Python+Flask
Features
The app allows users to add journal entries. When adding a new entry the user can add a story and a feeling, the feeling list is auto populated from the database. Entries can be edited, archived or deleted. Archived entris will go on a separate page and can be accesed at a later time, they also can be unarchived. When deleting an entry a confirmation modal will be shown to the user. Logging out will send the user back to the login page, keeping all the entries in the database from where they can be accesed at a later time.
Future plans
Some of the features that can be implemented:
- add images/videos to the entries
- instead of delete confirmation add "Undo" option, add "Bin" page
- add a WYSIWYG editor
- add pagination
Testing
The app was tested on all major browsers with no known issues.
When testing on the official validator services I had some errors with duplicate ids for some elements, errors that were corrected.
After fixing the ids issues, tested HTML, CSS and JS on the official validator services. No other major issues found.
Deployment
The site is hosted on GitHub, deployed from the master branch. The deployed site will update automatically upon new commits to the master branch.
The project is also hosted on Heroku here. To deploy the app to Heroku, you typically use the git push command to push the code from your local repository's master branch to your heroku remote, like so: $ git push heroku master.
To run locally, you can clone this repository directly into the editor of your choice by pasting git clone https://github.com/onisstudio/personal-journal-ms3.git into your terminal. To cut ties with this GitHub repository, type git remote rm origin into the terminal.
Credits
Media
The photo used on the login page was obtained from Pexels.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
