https://github.com/self-nasu/intern-assessment

MERN Stack Web Applications With CRUD operations.
https://github.com/self-nasu/intern-assessment

api curd mern-project mern-stack mongodb reactjs server-side webapplication

Last synced: 2 months ago
JSON representation

MERN Stack Web Applications With CRUD operations.

• Host: GitHub
• URL: https://github.com/self-nasu/intern-assessment
• Owner: Self-nasu
• License: gpl-3.0
• Created: 2024-12-27T09:23:44.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-28T04:13:19.000Z (over 1 year ago)
• Last Synced: 2026-01-03T11:57:15.835Z (5 months ago)
• Topics: api, curd, mern-project, mern-stack, mongodb, reactjs, server-side, webapplication
• Language: JavaScript
• Homepage:
• Size: 950 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Learn and Build Intern Assessment CRUD Application

This is my assessment project repository in which I created a MERN stack web application. The app includes a login/signup form and two pages: 

1. **Login/Signup Page**: Where users can log in or sign up.

2. **Home Page**: Where users can update, view, or delete their profiles. Below the user’s profile, the details of all other users are listed as asked in assesment.

## To Run This Project

### 1. Download the repository and extract it. Then, navigate to the project folder.

#### Running the Frontend:

1. `npm install`

2. `npm run dev`

#### Running the Backend:

1. Navigate to the `backend` folder inside the project folder.

2. Open the terminal in that path.

3. `npm install`

4. `node server.js`

5. Make Sure That YOu Have .env File in Your backend folder

**Note**: You will need to set up the environment variables. The `.env` file should contain:

- A **JWT key** for password encoding

- A **MongoDB connection string**

## Design

For the website's base design, I used **Figma** (image below).

![Login Page](ReadmeFiles/Login%20Page.png)

![Home Page](ReadmeFiles/Main%20Home%20Page.png)

### Frontend Stack:

- **ReactJS**

- **Bootstrap 5**

### Backend Stack:

- **ExpressJS**

- **NodeJS**

### Database:

- **MongoDB** (Free Hosted on MongoDB Cluster)

- For connecting to my db contact me for env file

### Final Website Image:

![Final Login](ReadmeFiles/Final%20Login.png)

![Final Home](ReadmeFiles/Final%20Home.png)