Compose journal entries in this full-stack app built w/ Express + EJS, Mongoose, HTML, SCSS, & Vanilla JS!
This is a project I initiated so I could learn to create a full-stack app in a node environment. I was motivated from the start to create something that the public could use and try straight away without having to go through the steps of creating yet another world wide web account. Accounts are most definitely important and you can create a normal account with this app, I just set out to reduce the initial friction. Now because of this, you would think that there is strong moderation and protections put in place to prevent possible spam. Unfortunately there is not, so that certainly could be a great future feature.
It was honestly pretty eye-opening in how all the parts of "full" come together to create a cohesive app; from dealing with object structures in the mongoDB atlas cluster database, to the front end experience in making sure the user flows are smooth.
I had a lot of fun making this project and I hope you will too by using the demo or cloning the repo or whatever you'd like to do!
(WIP)
I am unsure if this formatting is the best to showcase features but here they are!
- Modern, responsive, streamlined design
- Create journal entries:
- Use a TinyMCE editor to write your entry using its GUI or just plain markdown
- Input a title and then input your content
- The title field has a maximum character length, the content field does not
- Delete your entries
- Edit your entries
- Sort journal entries
- Comment on journal entries:
- Delete your comments
- Edit your comments
- Automatic (anonymous) account creation:
- When you create a journal entry or comment without signing up or logging in, you are assigned a randomized, super cool username
- You don't need to go through the process of creating a "normal" account should you not want to
- You are able to comment and create journal entries regularly
- This account type is designed to be used only in a single browser and therefore you cannot "login" to this account on another device/browser
- When you are using this "anonymous" account, you can opt to upgrade to a normal account in Settings:
- You can choose to use your randomly generated username or choose a new one
- All your journal entries and comments are then moved over to your newly created normal account
- Permanently delete your account + data
- Normal account creation (username + password):
- (WIP) Change your username and/or password
- Permanently delete your account + data
- Flash notifications to alert the user of important actions
NOTE: I have been using NodeJS v16.15.0 for the entirety of this project. Your mileage may vary if you use other versions.
You can start by doing git clone https://github.com/gabesean/public-journal.git while in your folder of choice.
To create your own environment variable .env file, you can cd into the folder that your cloned project is in and touch .env to create the file at the root.
This app uses a MongoDB atlas cluster for the database, in the root index.js there two important environment variables, MONGO_KEY and CRYPT_KEY. You would need to provide your own mongoDB auth key, or edit the code to provide a local MongoDB database instead. The CRYPT_KEY is used to encrypt the user sessions and save them to a local storage.
Finally, use npm run dev to serve up your local dev server.
NOTE: The package.json start command currently consists of using nodemon to start up the server. If you have a preferred way to start the node server, go right ahead!
You can visit the demo website for yourself, or you can clone, and find a place to host your own version of this app!
I've been coming to head with many hurdles with this project. Later on in my journey, I came across what I think is a race condition involving the npm module "connect-flash". Basically, I was trying to send flash() notifications to the user when they have actioned on specific things such as deleting an account or entering the wrong password during sign up, and sometimes the messages would not show up on the client if they were redirected or another ejs view has been rendered. I was seriously lucky I was able to find this GitHub issue literally not that long ago where a user named jakeorr provided some insight as to why this behavior is occuring. Basically, express & session do not wait for the async nature of the session to save before the response is served. So jakeorr suggested something like this:
req.flash('message', 'Please check your email to confirm it.');
req.session.save(function () {
res.redirect('/register');
});Which is what I will now be implementing in my app. Thank you jakeorr.
I want to thank the amazing developers behind passportjs, mongoosejs, nodejs, ejs, dotenv, expressjs, lodash, meaningful-string, sass tinymce, bulma. I am totally forgetting some, but I digress. Without your genius work, I would not have been able to create and work on this project. Thank you to the stackoverflowers out there who unknowingly provided me some guidance too. <3
I need to choose some sort of license...