Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nishayo/contact-me
This is fully functional contact form made using MERN stack and docker.
https://github.com/nishayo/contact-me
hacktoberfest
Last synced: 6 days ago
JSON representation
This is fully functional contact form made using MERN stack and docker.
- Host: GitHub
- URL: https://github.com/nishayo/contact-me
- Owner: nishaYO
- Created: 2023-10-18T04:42:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-20T07:46:03.000Z (about 1 year ago)
- Last Synced: 2024-10-12T13:12:47.934Z (about 1 month ago)
- Topics: hacktoberfest
- Language: JavaScript
- Homepage:
- Size: 217 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Contact Form Web Application
## Steps for Local Setup
1. **Clone the Repository:**
```bash
git clone https://github.com/nishaYO/contact-me.git
```
2. **Run Installation Commands:**
```bash
cd client
npm install
cd ../server
npm install
```
3. **Create .env File in Root Directory:**
```bash
cd ..
touch .env
```
4. **Enter MongoDB Connection Details in .env:**
```text
MONGO_URI=MONGO_URI=mongodb+srv://:@.mongodb.net/?retryWrites=true&w=majority
MONGO_USERNAME=
MONGO_PASSWORD=
```
5. **Open Docker Desktop**
6. **Run Containers:**
```bash
docker-compose up -d
```
7. **Stop Running Containers:**
If you've finished exploring the codebase, gracefully stop the running containers using:
```bash
docker-compose down
```
## Technologies Used
- MongoDB
- Node.js
- Express.js
- React
- SCSS
- Docker
## How It Works
1. User inputs data in the contact form.
2. Frontend performs input validation.
3. POST request with inputs sent to the backend (localhost:5000) in JSON format.
4. Backend performs input validation.
5. JSON parsing on inputs.
6. Document created using inputs and saved in MongoDB.
7. If any errors, response with a 500 status code sent to the frontend.
8. Success message sent to the frontend on successful submission.
9. User notified of errors or successful submission.