Inki album cover

Meeli Forum

social networking site

Role

Back & Front End developer, Web Designer

Tools

NodeJS, MongoDB, EJS, AWS

Project Type

CRUD Application

Date

December 2023


Access Meeli Forum here.
For my Web Design class, I was tasked with using the CRUD application (Create, Read, Update, Delete). I had to create a site where users could create an account, post, update a post or even delete it. This challenged with the back-end side of it but with some hard work, perseeverance, and lots of debugging it is done! This forum is made for skincare lovers as an extension of the What's in your pantry? site I created.


Design Process


- Requirements. As previously mentioned, the task here was to create a social networking side using the CRUD application, Essentially, everyone can access the hompage of the website where all the content posted by users will be. They can read any articles or content included. However, they can only post content or articles if they are a registered user. They can register by creating an account with a username, password, name, and profile photo. As a registered user, they are also able to delete and update all the content on the site.

- Back end. The biggest task was the backend. For this assignment, our prof has already given us the file with the password hatching since we have not covered it yet. I was in charge of handling the rest. I used Node.JS for this project. I mainly used partials assets to make the website dynamic. I had to create a site where users could register as well as a login page. The homepage was the one I was most familiar with because it was not too complicated. For each article, a new page had to be created. This was the harder part because of how the information had to be retrieved.

- Database. I used MongoDB as a database. This means that all information posted on the website was saved as a JSON file to my database collection. I created different collections for each articles posted by the users. Essentially, all new articles would go there only if they fit all the requirements and if all the required inputs are completed. I had a different collection for registered users, including their name, username and a hatched version of their password.

- Front End. The focus of this project was not really the front-end,but more on the functionalities of the website. I still attempted to keep a good design look and feel by incoroporating some lively pastel colors to it, as it is the feeling of skincare and wellbeing. For the other design assets, I msotly used Bootstrap (for the navigation).

You may also like..