Express Bus
ReactAntd-DesignReduxStripe.js
A bus ticket booking app is an automated system that enables passengers to purchase bus tickets online. The system also allows them to schedule their route, check seat availability, and even make online payments through secure payment gateways.
Key Features
πΆββοΈ User Registration & Login
- Users can create an account and log in using email and password. JWT (JSON Web Token) is used for authentication to enhance security.
π Bus Search & Booking
- Users can search for buses by selecting departure, destination, and date.
- Users can view available buses, select one, and make a reservation.
- Booking details can be viewed.
π Booking Management
- Users can view, cancel, or modify their reservations. Booking statuses can be updated to 'Confirmed', 'Cancelled', etc.
π³ Payment System
- Stripe.js is integrated for online payments, allowing users to complete payment while booking a bus.
- Payment details are securely processed, and bookings are confirmed after payment.
π¨βπ» Admin Dashboard
- Admins can manage bus routes, schedules, and seat availability. They can also view booking details and handle customer requests.
π Admin & User Roles
- Different roles (admin and user) are assigned with specific permissions for managing the system.
Front-End Technical Implementation π»
π State Management with Redux Toolkit
- Implemented state management using Redux Toolkit to manage the global state of the application, ensuring a scalable and maintainable architecture for complex state logic.
π Routing with React Router
- Utilized React Router for handling navigation and routing in a single-page application (SPA), allowing seamless navigation between different views with URL changes.
π³ Stripe Payment Integration
- Implemented React Stripe Checkout for secure payment processing, enabling users to make payments through Stripe directly within the app.
π‘ HTTP Requests with Axios
- Used Axios for making HTTP requests to external APIs, handling asynchronous data fetching and providing smooth user interactions.
π Date Handling with Moment.js
- Incorporated Moment.js for efficient handling and manipulation of dates, providing functionality for displaying and formatting date-time values in the app.
π Print Feature with React-to-Print
- Enabled React-to-Print functionality, allowing users to print specific sections of the app directly from the UI with custom print formatting.
π Toast Notifications with React Hot Toast
- Added React Hot Toast for displaying toast notifications in the app, alerting users to important events like form submissions, errors, and success messages.
π¦ Legacy Redux Integration
- Integrated Redux alongside Redux Toolkit for backward compatibility, maintaining support for legacy state management and handling complex actions efficiently.
π Web Vitals Monitoring
- Included Web Vitals for performance monitoring, tracking important metrics to ensure the app delivers a fast and smooth experience for users.
Back-End Technical Implementation π
π Server Setup with Express.js
- Built the server using Express.js, enabling efficient handling of HTTP requests and defining API endpoints for the application.
π Authentication and Authorization
- Implemented authentication using JSON Web Tokens (JWT) to securely manage user sessions and protect routes requiring authentication.
- Used bcrypt.js to hash and securely store passwords, enhancing user account security.
π’ Database Management with Mongoose
- Utilized Mongoose for defining schemas and interacting with a MongoDB database, ensuring robust and flexible data management.
π³ Payment Processing with Stripe
- Integrated Stripe using the stripe and @stripe/stripe-js packages for handling secure payment processing and managing transactions.
π§ Email Notifications with Nodemailer
- Configured Nodemailer to send transactional emails such as account verifications, password resets, and payment confirmations to users.
βοΈ Environment Configuration
- βοΈ Integrated Stripe using the stripe and @stripe/stripe-js packages for handling secure payment processing and managing transactions.
- π Development Workflow with Nodemon
- π Used unique Identifiers with UUID
What I learned π
π Full-Stack Development Experience
- Frontend: Built dynamic web applications using React and Redux, gaining a deep understanding of component-based design and state management.
- Backend: Developed RESTful APIs with Node.js and Express.js, improving skills in server-side logic and CRUD operations.
- Database: Used MongoDB to design schemas, process data, and optimize queries.
π User Authentication and Authorization
- Authentication: Implemented JWT-based login and signup features, ensuring secure user verification and session handling.
- Authorization: Designed access control systems like RBAC (Role-Based Access Control) to manage user permissions effectively. For example, admins can access all tickets, while users can only view their bookings.
πΎπβ‘ Optimization of Data Storage and Retrieval
- Mastered efficient management and retrieval of large-scale data using advanced queries and indexing in MongoDB.
- Improved skills in systematically managing user data through data modeling.
π³ Payment System Integration
- Integrated Stripe for online payments, learning about secure payment workflows, API integration, and data handling.
π API Design and RESTful Architecture
- Designed RESTful APIs, mastering HTTP methods (GET, POST, PUT, DELETE) and status codes to enable smooth client-server communication.
π¨ Design and UI/UX
- Built user-friendly interfaces with Ant Design, improving UI/UX skills and creating designs that focus on real-world user experiences.