This project aims to provide users with a streamlined form interface to collect user information, vehicle preferences, and booking dates for vehicle rentals.
Frontend | Backend | Fullstack
Frontend: https://octalogic-ii1k62xhm-sgkolipyakas-projects.vercel.app/ Backend: https://octalogic-backend-1.onrender.com/
my-app/
├─ backend/
│ ├── Controllers/
│ │ ├── userBookingRoutes.js: Controller for handling user booking routes and logic.
│ │ └── vehiclesRoutes.js: Controller for handling vehicle-related routes and logic.
│ ├── Migrations/ Database migration scripts.
│ ├── Models/
│ │ ├── UserBooking.js: Model definition for user bookings.
│ │ └── Vehicle.js: Model definition for vehicle data.
│ ├── index.js: Entry point for the backend application.
│ ├── node_modules/ Directory containing Node.js modules (dependencies).
│ ├── seeders/ Database seeding scripts.
│ ├── .gitignore: Configuration file to specify files/folders that Git should ignore.
│ ├── package-lock.json: Automatically generated file describing the exact tree of npm packages that were installed.
│ └── package.json: File containing metadata and dependencies for the Node.js project.
├─ frontend/
│ ├── public/ Static assets and HTML file used as the template for the React application.
│ └── src/
│ ├── Container/
│ │ ├── BookingDates.tsx: Component for handling booking date selection.
│ │ ├── BookingSuccessMessage.jsx: Component for displaying a success message after booking.
│ │ ├── NameForm.tsx: Component for capturing user name information.
│ │ ├── NumberWheels.jsx: Component for selecting the number of wheels.
│ │ ├── SpecificModel.jsx: Component for selecting a specific vehicle model.
│ │ └── VehicleType.jsx: Component for selecting the type of vehicle.
│ ├── Context/ Directory for managing React context providers and consumers.
│ ├── Redux/ Directory for Redux-related files such as reducers, actions, and store setup.
│ ├── ReusableComponents/ Directory containing reusable UI components.
│ ├── App.css: CSS file for styling the main application components.
│ ├── App.test.tsx: Test file for testing React components.
│ ├── App.tsx: Main component where other components are rendered.
│ ├── index.css: CSS file for global styles.
│ ├── index.tsx: Entry point for the React application.
│ ├── logo.svg: SVG file used as the logo for the application.
│ ├── react-app-env.d.ts: TypeScript declaration file for global types.
│ ├── reportWebVitals.ts: File for reporting web vitals.
│ ├── setupTests.ts: File for setting up tests.
│ ├── .gitignore: Configuration file to specify files/folders that Git should ignore.
│ ├── README.md: Documentation file providing information about the frontend application.
│ ├── package-lock.json: Automatically generated file describing the exact tree of npm packages that were installed.
│ └── package.json: File containing metadata and dependencies for the React project.
Attach a very short video walkthough of all of the features [ 1 - 3 minutes ]
In case of Backend Applications provide a list of your API endpoints, methods, brief descriptions, and examples of request/response.
GET /api/vehiclesbooked - Get all the info about users who have booked the vehicals
POST /api/userbookings - user can book the Vehicals
GET /api/getvehicle - Get all the info about available Vehicals for booking
POST /api/add - adding the vehicals into database for booking
PATCH /api/update/:id - To edit the vehicals info
- Enter Name Page
- select number Wheels
- Select the Type
- select the Model
- Select the Date
- Date valadation
- booked Success page
List and provide a brief overview of the technologies used in the project.
- Node.js
- Express.js
- React.js
- Redux
- MaterialUI
- MsQL
- typeScript
- JavaScript