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
- Host: GitHub
- URL: https://github.com/boddepallyvenkatesh06/employee-entry-full-stack
- Owner: BoddepallyVenkatesh06
- Created: 2025-01-12T18:35:02.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-12T18:40:33.000Z (4 months ago)
- Last Synced: 2025-01-12T19:35:56.788Z (4 months ago)
- Topics: nodejs-s3, postcss, reractjs, tailwindcss
- Language: JavaScript
- Homepage: https://employee-entry.netlify.app/
- Size: 0 Bytes
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Employee Entry Website π₯πΌ
# Live link ππ‘ - https://employee-entry.netlify.app/
# 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
# HomePage
# Go back
# Form Validation
# Form
