Fullstack (MERN Stack) Website Development
Overview:
The goal? To blend server-side and client-side scripting, using Node.js for the backend and a front-end framework
Key Objectives:
- Create a slick web app using a RESTful web API.
- Secure things with an authentication protocol for different user levels.
- Be mobile-friendly and browser-compatible.
- Don't forget the security and privacy policies.
Features to Knock Out:
- Account creation with local authentication (email, password, nickname).
- Limited perks for non-logged-in users.
- Hero search with soft-matching and nifty extras.
- Lists of public hero lists (with ratings) for everyone to see.
- Authenticated users can create and manage their hero lists.
- Admin superpowers to manage users, reviews, and copyright stuff.
API and Tech Stack:
- Node.js for the backend.
- Front-end framework of choice: React
- Keep it clean, modular, and easily extensible.
Security and Policies:
- Tight security policies and privacy terms (publicly accessible).
- DMCA notice & takedown policy (keep it accessible).
- Tools for the admin to handle copyright disputes like a superhero.
Website Display:
Hey there! Here's the quick visual display of my Fullstack Website Project!
Home Page:
User Dashboard:
User Dashboard after logging in or registering a new account
Creating New Lists:
User can create, delete, and edit public or private lists
Search Page:
User Search page for displaying public lists and searching for superhero name, race, publisher, and power
Search Results:
Users have ability to search on DDG by clicking on "Search on DDG" button
Admin Page:
Admin has ability to disable/enable users and delete all lists created by all users
Deploying My Website on AWS: A Step-by-Step
Greetings, fellow engineering pals! 👋 As a third-year student navigating the AWS landscape, let me share my journey on uploading my website to an AWS server. Here's a chill summary:
One-time Setup:
- Getting AWS Academy Access:
- I hit the "Get Started" button in the email invitation.
- Created or logged into my Canvas account.
- Shot an email to the instructor when no invite arrived.
- Set up my Canvas account.
Logging into AWS Academy:
- Headed to AWS Academy.
- Clicked on my course, hit up the "Modules" section.
- Launched the AWS Academy Learner Lab.
- Clicked "Start Lab," patiently waited for the green AWS light.
- Downloaded the SSH key from "AWS Details."
- Clicked "AWS 🟢" to open the AWS console.
Web Server Setup on AWS:
Step 1: Setting Up the Server (One-time setup)
- Fired up the AWS Management Console.
- Launched an instance, stuck with Amazon Linux.
- Named my instance, kept things default, allowed SSH, HTTPS, and HTTP in the security group.
- Clicked "Launch instance" and chilled till it turned "Running."
- Copied the "Public IPv4 DNS" from the instance details.
Step 2: My Journey In
- Returned to AWS Academy, tapped into "Readme," and slid into the "SSH Access" link.
Step 3: Rocking Updates and Nginx
- After login, I went for the software update with
sudo yum update
. - Threw in Nginx with
sudo yum install nginx
. - Popped open the browser, tossed in the server name - got the expected timeout.
- Sprinkled some magic -
sudo systemctl enable nginx
andsudo systemctl start nginx
. - Refreshed the browser - Boom! "Welcome to nginx!"
Step 4: My Website’s Grand Entrance
- Dived into Nginx config with
sudo nano /etc/nginx/nginx.conf
. - Switched "root /usr/share/nginx/html;" to "root /var/www/webtech/html;".
- Saved, crafted necessary folders.
- Checked permissions, poured in my HTML, and hit Nginx with a restart.