Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ajmalfaris11/mern
A full-stack MERN (MongoDB, Express, React, Node.js) application built for study purposes, following industrial standards. Includes server-side APIs with Node.js and Express, and a dynamic client-side using React with Redux. Focuses on modular architecture, authentication, database integration, and deployment practices for scalable web development.
https://github.com/ajmalfaris11/mern
authentication backend client-side expressjs frontend fullstack-development industrial-standards mern-stack mongodb nodejs reactjs redux rest-api server-side study-project web-development
Last synced: 25 days ago
JSON representation
A full-stack MERN (MongoDB, Express, React, Node.js) application built for study purposes, following industrial standards. Includes server-side APIs with Node.js and Express, and a dynamic client-side using React with Redux. Focuses on modular architecture, authentication, database integration, and deployment practices for scalable web development.
- Host: GitHub
- URL: https://github.com/ajmalfaris11/mern
- Owner: ajmalfaris11
- Created: 2024-11-28T20:50:40.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-10T22:41:58.000Z (about 1 month ago)
- Last Synced: 2024-12-10T23:26:37.509Z (about 1 month ago)
- Topics: authentication, backend, client-side, expressjs, frontend, fullstack-development, industrial-standards, mern-stack, mongodb, nodejs, reactjs, redux, rest-api, server-side, study-project, web-development
- Language: JavaScript
- Homepage:
- Size: 3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERN Stack Industrial Study Project
This project is a full-stack MERN (MongoDB, Express, React, Node.js) application designed for educational purposes. It follows industrial-level standards for both the **client-side** (React) and **server-side** (Node.js, Express) implementations. The application demonstrates scalable architecture, modular code, state management with Redux, robust user authentication, and deployment practices.
---
## Table of Contents
- [Project Overview](#project-overview)
- [Technologies Used](#technologies-used)
- [Features](#features)
- [Folder Structure](#folder-structure)
- [Setup & Installation](#setup--installation)
- [API Endpoints](#api-endpoints)
- [Running the Project](#running-the-project)
- [Contributing](#contributing)
- [License](#license)
---
## Project Overview
This project is a simple MERN stack application that allows users to interact with a database, perform CRUD operations, and manage state with Redux on the frontend. The backend is built using Express and MongoDB, and the frontend uses React for dynamic rendering. The application is designed to follow modern development practices and is a great resource for anyone learning MERN stack development at an industrial level.
---
## Technologies Used
- **MongoDB**: NoSQL database to store and manage application data.
- **Express.js**: Web framework for Node.js, used to build the backend API.
- **React.js**: Frontend JavaScript library for building user interfaces.
- **Node.js**: JavaScript runtime used for the server-side development.
- **Redux**: State management library for React.
- **JWT (JSON Web Token)**: For user authentication and session management.
- **Bcrypt.js**: Library for hashing passwords.
- **Axios**: Promise-based HTTP client for making API requests.
- **Mongoose**: MongoDB object modeling for Node.js.
- **dotenv**: For managing environment variables.
---
## Features
- **Authentication**: User login and registration with JWT-based authentication.
- **CRUD Operations**: Create, Read, Update, and Delete data through RESTful APIs.
- **State Management**: Redux for managing app state across components.
- **Responsive UI**: Dynamic frontend using React that is mobile-friendly.
- **Error Handling**: Graceful error handling and validation on both frontend and backend.
- **Modular Codebase**: Well-structured and scalable architecture for easy maintenance.
- **Environment Configuration**: Environment variables used for secure configuration.
---
## Folder Structure
The project is divided into two main parts: the **server-side** (backend) and the **client-side** (frontend).
```
/mern-stack-industrial-study-project
│
├── /client # React client-side application
│ ├── /src
│ │ ├── /components # React components
│ │ ├── /redux # Redux store and actions
│ │ └── /utils # Helper functions
│ ├── package.json # React dependencies
│ └── .env # Environment variables for the client
│
├── /server # Node.js backend application
│ ├── /controllers # Express route controllers
│ ├── /models # Mongoose models
│ ├── /routes # Express routes
│ ├── /middleware # Middleware for authentication
│ ├── server.js # Main server file
│ ├── .env # Environment variables for the server
│ └── package.json # Backend dependencies
│
└── README.md # This file
```
---
## Setup & Installation
### Prerequisites
Before starting, ensure that you have the following installed:
- **Node.js** (v14 or higher)
- **MongoDB** (either locally or a cloud-based service like MongoDB Atlas)
### Steps to Run Locally
1. **Clone the repository**:
```bash
git clone https://github.com/your-username/mern-stack-industrial-study-project.git
cd mern-stack-industrial-study-project
```
2. **Install dependencies for both client and server**:
- For the **client-side**:
```bash
cd client
npm install
```
- For the **server-side**:
```bash
cd ../server
npm install
```
3. **Setup environment variables**:
- Create `.env` files in both `/client` and `/server` directories.
- Define necessary variables like database URL, JWT secret, etc.
- Example `.env` file for the server:
```bash
MONGO_URI=mongodb://localhost:27017/mernstack
JWT_SECRET=your_jwt_secret
```
4. **Start the server and client**:
- In the **server** directory:
```bash
npm start
```
- In the **client** directory:
```bash
npm start
```
The application should now be running on `http://localhost:3000` (client) and `http://localhost:5000` (server).
---
## API Endpoints
### Authentication
- **POST /api/auth/register**: Register a new user.
- **POST /api/auth/login**: Login and receive JWT token.
### Users
- **GET /api/users**: Get a list of all users.
- **GET /api/users/:id**: Get a specific user by ID.
- **PUT /api/users/:id**: Update user information.
- **DELETE /api/users/:id**: Delete a user.
---
## Running the Project
1. **Start the backend server**:
```bash
cd server
npm start
```
2. **Start the frontend client**:
```bash
cd client
npm start
```
Visit `http://localhost:3000` in your browser to interact with the application.
---
## Contributing
Contributions are welcome! If you'd like to contribute to this project, please follow these steps:
1. Fork this repository.
2. Create a new branch (`git checkout -b feature-name`).
3. Make your changes and commit (`git commit -am 'Add new feature'`).
4. Push to the branch (`git push origin feature-name`).
5. Open a pull request.
---
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.