{"id":19811412,"url":"https://github.com/chandan-devs-tech/checkout-form","last_synced_at":"2026-04-10T07:19:27.719Z","repository":{"id":254370146,"uuid":"846330751","full_name":"Chandan-devs-tech/checkout-form","owner":"Chandan-devs-tech","description":"A full-stack MERN application with a React frontend and Express backend for processing and managing checkout orders. 🛒💳","archived":false,"fork":false,"pushed_at":"2024-08-26T12:58:14.000Z","size":259,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-11T07:13:40.229Z","etag":null,"topics":["expressjs","mongodb","nodejs","reactjs"],"latest_commit_sha":null,"homepage":"https://checkout-form-app.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chandan-devs-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-23T01:35:34.000Z","updated_at":"2024-08-26T12:58:18.000Z","dependencies_parsed_at":"2024-08-26T16:35:35.393Z","dependency_job_id":null,"html_url":"https://github.com/Chandan-devs-tech/checkout-form","commit_stats":null,"previous_names":["chandan-devs-tech/checkout-form"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chandan-devs-tech%2Fcheckout-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chandan-devs-tech%2Fcheckout-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chandan-devs-tech%2Fcheckout-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chandan-devs-tech%2Fcheckout-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chandan-devs-tech","download_url":"https://codeload.github.com/Chandan-devs-tech/checkout-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241156660,"owners_count":19919341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expressjs","mongodb","nodejs","reactjs"],"created_at":"2024-11-12T09:26:27.564Z","updated_at":"2025-10-26T11:35:54.983Z","avatar_url":"https://github.com/Chandan-devs-tech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./frontend/public/preview.png\" alt=\"Checkout Form Preview\" width=\"300\"/\u003e\n\u003c/p\u003e\n\n# MERN Stack Checkout Form\n\nThis project demonstrates a simple checkout form built using the MERN stack (MongoDB, Express, React, Node.js). The application allows users to enter their details, add items to their order, and submit the form. The order data is then stored in a MongoDB database.\n\n## Table of Contents\n\n- [MERN Stack Checkout Form](#mern-stack-checkout-form)\n  - [Table of Contents](#table-of-contents)\n  - [Features](#features)\n  - [Technologies Used](#technologies-used)\n  - [Installation](#installation)\n  - [Run the Application](#run-the-application)\n  - [Run the Application](#run-the-application-1)\n  - [Usage](#usage)\n  - [API Endpoints](#api-endpoints)\n  - [Project Structure](#project-structure)\n  - [Optional Enhancements](#optional-enhancements)\n  - [Future Improvements](#future-improvements)\n  - [Contributing](#contributing)\n  - [License](#license)\n\n## Features\n\n- **Frontend**:\n\n  - A React component for the checkout form with input fields for user's name, shipping address, payment information, and order items.\n  - Basic validation to ensure all fields are filled out correctly.\n  - Dynamic item management (add, update, delete items).\n  - Calculation of the total order amount.\n\n- **Backend**:\n\n  - An Express server with RESTful API endpoints to handle CRUD operations for orders.\n  - MongoDB database connection to store order details.\n  - Data validation and error handling on the server side.\n\n- **Integration**:\n\n  - Full integration between the React frontend and Express backend using Axios for HTTP requests.\n  - Display of order data saved in MongoDB.\n\n- **Optional Enhancements**:\n  - Confirmation message or redirect to a \"Thank You\" page after successful form submission.\n\n## Technologies Used\n\n- **Frontend**: React, Axios\n- **Backend**: Node.js, Express\n- **Database**: MongoDB, Mongoose\n- **Others**: Axios for API requests, HTML/CSS for basic styling\n\n## Installation\n\nTo run this project locally, follow these steps:\n\n1. **Clone the repository**:\n\n   ```bash\n   git clone https://github.com/Chandan-devs-tech/checkout-form.git\n   cd checkout-form\n   ```\n\n2. **Install dependencies for both frontend and backend**:\n\n   ```bash\n   # Install backend dependencies\n   cd backend\n   npm install\n\n   # Install frontend dependencies\n   cd ../frontend\n   npm install\n   ```\n\n3. **Set up environment variables**:\n\n   Create a `.env` file in the `backend` directory and add the following:\n\n   ```bash\n   MONGODB_URI=\u003cYour MongoDB Connection String\u003e\n   PORT=5000\n   ```\n\n## Run the Application\n\nTo run the application, follow these steps:\n\n```bash\n# Run backend server\ncd backend\nnpm start\n\n# Run frontend React app\ncd ../frontend\nnpm start\n```\n\n## Run the Application\n\nOpen your browser and navigate to [http://localhost:3000](http://localhost:3000) to view the application.\n\n## Usage\n\n1. Fill out the checkout form with your name, address, payment information, and add order items.\n2. Click \"Submit\" to place the order.\n3. The order will be sent to the backend and stored in the MongoDB database.\n4. If an order is successfully placed, a confirmation message will be displayed, or you will be redirected to a \"Thank You\" page.\n\n## API Endpoints\n\n- **POST** `/api/orders`: Create a new order.\n- **GET** `/api/orders`: Retrieve all orders.\n- **PUT** `/api/orders/:id`: Update an existing order by ID.\n- **DELETE** `/api/orders/:id`: Delete an order by ID.\n\n## Project Structure\n\n```bash\ncheckout-form/\n│\n├── backend/                     # Backend codebase\n│   ├── controllers/             # Controllers for handling requests\n│   ├── models/                  # Mongoose models for MongoDB\n│   ├── routes/                  # Express route definitions\n│   ├── app.js                   # Express server setup\n│   └── .env                     # Environment variables\n│\n├── frontend/                    # Frontend codebase\n│   ├── src/                     # React source files\n│   │   ├── components/          # React components\n│   │   ├── App.js               # Main React component\n│   │   └── index.js             # Entry point for React\n│   └── public/                  # Public files for React\n│\n└── README.md                    # Project documentation\n\n```\n\n## Optional Enhancements\n\n- Display a confirmation message or redirect the user to a \"Thank You\" page after a successful order submission.\n- Implement more robust validation for payment information.\n- Add error handling and user notifications for various error cases (e.g., network issues, server errors).\n\n## Future Improvements\n\n- Add authentication and user management.\n- Integrate a payment gateway (e.g., Stripe) for real payments.\n- Implement a more sophisticated UI/UX design with a CSS framework or library like Tailwind CSS.\n\n## Contributing\n\nContributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchandan-devs-tech%2Fcheckout-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchandan-devs-tech%2Fcheckout-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchandan-devs-tech%2Fcheckout-form/lists"}