/CRUD-WebApp

Coding task given during applying for full-stack developer internship at RedPositive

Primary LanguageJavaScript

Full-stack Internship Coding Task

This project is part of an internship coding task that involves creating a CRUDS application with a UI, using MongoDB, Node.js, Express.js, and React.js.

Task Overview

The goal of this task is to create a web application that allows users to perform CRUD operations (Create, Read, Update, Delete, and Send) on a dataset. The application consists of a form, a table, and various buttons for interaction.

Features

  • UI with a form, table, and buttons
  • Form with fields for name, phone number, email, and hobbies
  • Save button to add new entries to the table and store data in MongoDB
  • Table with columns for ID, name, phone number, email, hobbies, and update/delete buttons
  • Select checkbox to choose rows for data manipulation
  • Add button to open a popup form for adding new entries
  • Validation for form fields
  • Send button to send selected row/rows data to email
  • Hosting on Heroku or Netlify
  • GitHub repository with code

Technologies Used

  • MongoDB: A NoSQL database used to store the application's data.
  • Node.js: A JavaScript runtime used for server-side development.
  • Express.js: A web application framework for Node.js used to build APIs.
  • React.js: A JavaScript library used for building user interfaces.
  • Other frontend technologies: HTML, CSS, JavaScript

Installation and Setup

  1. Clone the GitHub repository: repo-link
  2. Install the necessary dependencies by running the following command:
npm install
  1. Start the application by running the following command:
npm start
  1. Open your browser and navigate to http://localhost:3000 to access the application.

Usage

  1. Fill in the form fields with the required information (name, phone number, email, and hobbies).
  2. Click the "Save" button to add the data to the table and store it in the MongoDB database.
  3. Use the checkboxes in the table to select one or more rows for data manipulation.
  4. Click the "Update" button to modify the selected row(s) in the table.
  5. Click the "Delete" button to remove the selected row(s) from the table.
  6. Click the "Send" button to send the selected row(s) data to the email address.
  7. Click the "Add New Data" button to open a popup form for adding new entries to the table.
  8. Follow the form field validations to ensure the data entered is correct.
  9. The application is hosted on either Heroku or Netlify. Access the hosted application using the provided URL.

License

This project is licensed under the MIT License.

Contact

For any inquiries or feedback, please contact:

Email: devangvartak2304@gmail.com