An open API service indexing awesome lists of open source software.

https://github.com/boddepallyvenkatesh06/employee-entry-full-stack

Welcome to the Employee Entry Website repository! This project empowers employees to easily fill out and submit their information through a user-friendly form
https://github.com/boddepallyvenkatesh06/employee-entry-full-stack

nodejs-s3 postcss reractjs tailwindcss

Last synced: 3 months ago
JSON representation

Welcome to the Employee Entry Website repository! This project empowers employees to easily fill out and submit their information through a user-friendly form

Awesome Lists containing this project

README

        

# Employee Entry Website πŸ‘₯πŸ’Ό

# Live link πŸŒπŸ“‘ - https://employee-entry.netlify.app/

Employee Entry Website Screenshot

# Employee Entry Website πŸ‘₯πŸ’Ό

Welcome to the Employee Entry Website repository! This project empowers employees to easily fill out and submit their information through a user-friendly form. The submitted data is securely stored in a MongoDB database. The website boasts two key pages: the dynamic homepage, showcasing all submitted employee data, and the intuitive form-filling page.

## πŸ› οΈ Technologies Used

- **Backend:** Express.js πŸ’»
- **Frontend:** Vite + React.js βš›οΈ
- **Styling:** Tailwind CSS 🎨
- **Database:** MongoDB Atlas πŸ“Š
- **API Testing:** Postman πŸ§ͺ
- **Database Testing:** MongoDB Compass 🧭
- **Deployment:** Netlify for frontend deploymentπŸš€

## ✨ Features

- ♻️ **Single Page Application**: Enjoy a seamless browsing experience with React's single page application architecture.
- βœ… **Form Validation**: Receive instant feedback and error messages when filling out the form, guiding for correct and complete information.
- πŸ“ **Effortless Form Filling:** Seamlessly input your details on our user-friendly form filling page.
- ⏳ **Loading Sleleton:** As soon as data is being fetched, a loading skeleton will be displayed on the page to enhance the user experience.
- πŸš€ **Streamlined Data Collection:** Your form data is consolidated into a single object before being sent to the database.
- 🏠 **Homepage Overview:** Get an overview of all submitted employees data on the homepage.
- 🌐 **MongoDB Atlas Integration:** Benefit from robust and scalable cloud database storage using MongoDB Atlas.
- πŸ”Œ **API Endpoints:** Experience smooth data submission and retrieval through our API endpoints.
- πŸ“± **Responsive Design:** Enjoy a flawless experience on all devices with our responsive design.

## πŸ“‚ Pages

- **Homepage**🏠 : On the homepage, you can view a list of all employees' data. Each employee's Name, Email Id, Department, and Role are displayed in a user-friendly table format. There's also a "Add Employee" button that takes you to the form filling page.

- **Form Filling Page** πŸ“: The form filling page allows you to submit employee data. You can fill in details such as Name, Email Id, Department, and Role. Once you've filled in the required information, you can submit the form, and the data will be sent to the backend server and stored in the database.

## πŸ–₯️ Screen Preview:

# HomePage - Loading Skeleton
![Alt Text](screenshots/image1.png)

# HomePage
![Alt Text](screenshots/image2.png)

# Go back
![Alt Text](screenshots/image4.png)

# Form Validation
![Alt Text](screenshots/image5.png)

# Form
![Alt Text](screenshots/image3.png)