Monolithic model-view-controller full-stack web application built with Node.js, Express.js, MonogDB, EJS, and Bootstrap. Server hosted on Heroku, Database hosted on MongoDB Atlas, served over Microsoft Azure with Google Domains as DNS provider.
To see the app in action, go to:
| Graphic Design | Front-End | Back-End | Database | Deployment | Testing |
|---|---|---|---|---|---|
| Figma | HTML5 | Node.js | Mongoose | Heroku | Jest |
| Lucidchart | CSS3 | ExpressJS | MongoDB | MongoDB Atlas | Lighthouse |
| . | Bootstrap 5 | EJS | . | Microsoft Azure | . |
| . | Javascript | . | . | Git | . |
- Used a Model-View-Controller (MVC) Monolithic Architecture since it's the most simple architecture to gain an introduction to full-stack web development. Building a MVC Monolith allows one to gain a perspective on the range of achitectures, particularly the lower-end of the range. The Monolith Architecture falls short in scalability and separation of front-end and back-end. The MVC Architecture falls short when the application begins to grow in complexity with the addition of services that could stand on thier own. The MVC Architecture is perhaps best used for simple proof-of-concept projects, like this one.
- Developed and maintain the app in GoormIDE to gain exposure to a cloud-based IDE.
- Bootstrap 5 as the CSS framework to keep the UI simple and quick to build. Since the website takes a performance hit for loading Bootstrap, took full advantage of advanced Bootstrap features such as custom validation for all forms and animated form input for the login and register pages.
- Express.js as the Node.js application framework since it's a lightweight framework, which is ideal for gaining an understanding of how to build the backend from scratch. Compared to a framework like Nest.js or even Django, Express.js doesn't have many features out of the box.
- PassportJs for the authentication and authorization.
- NoSQL database for the flexibility compared to a SQL database, MongoDB in particular because of its prevalence in the industry.
- Embedded Javascript Templates (EJS) as the front-end templating language for more DRY code compared to plain HTML and for dynamic user-experiences. This is a simple templating language, similar to Jinja for Python. Both however fall short on front-end scalability, modularity, and performance compared to a framework like React. Working with simple templating languges helps to remind me the benefits of working with a framework like React.
- Heroku as the cloud hosting provider to gain experience with PaaS. Since I'm using the free tier, which normally causes the application to sleep after 30 minutes of inactivity, the application is kept awake from 6:00 a.m. to 11:59 p.m. PST with Kaffeine.
- Microsoft Azure as the virual server host for deplpoyment in production.
- Figma to study Human Interaction Design and design mock interfaces for app.
-
Authentication:
-
User login with username and password
-
Admin sign-up with admin code
-
-
Authorization:
-
One cannot manage posts and view user profile without being authenticated
-
One cannot edit or delete posts and comments created by other users
-
Admin can manage all posts and comments
-
-
Manage campground posts with basic functionalities:
-
Create, edit and delete posts and comments
-
Upload campground photos
-
Display campground location on Google Maps
-
Search existing campgrounds
-
-
Manage user account with basic functionalities:
-
Password reset via email confirmation(disabled) -
Profile page setup with sign-up
-
-
Flash messages responding to users' interaction with the app
-
Responsive web design
git clone https://github.com/tiz170/Campgrounder.gitnpm installor
yarn installnode app.js
Some comments in the source code are course notes and therefore might not seem necessary from a developer's point of view.