NTU Software Engineering Project 2

Springmart: A Full-Stack E-Commerce Powerhouse (Client / Frontend)

Springmart's frontend is a dynamic and intuitive user interface powered by React, Tailwind CSS, and JavaScript. This component seamlessly integrates with the Springmart backend to create a comprehensive full-stack e-commerce platform.

Key Dependencies

• React: A JavaScript library for building user interfaces.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• JavaScript: The primary scripting language for frontend development.
• Formik: A form library for React to handle form state and validation.
• JWT Authentication: Implements JSON Web Token (JWT) authentication for secure user access.
• React Router: Facilitates navigation and routing within the React application.

User Authentication and Security

Springmart's frontend prioritizes user authentication and security:

• JWT Authentication: Implements a secure user authentication process using JSON Web Tokens (JWT).
• Formik Integration: Utilizes Formik for efficient form handling, ensuring a seamless user authentication experience.
• Protected Routes: Certain routes are protected and accessible only to authenticated users with valid JWT tokens.
• Secure Communication: Ensures secure communication with the backend server, safeguarding user data during transactions.

Responsive Design with Tailwind CSS

• Mobile-First Approach: Adopts a mobile-first design strategy for an optimal user experience on various devices.
• Tailwind CSS Framework: Leverages Tailwind CSS for a utility-first approach to styling, enabling rapid and maintainable UI development.
• Custom Styling: Implements custom styling to enhance the visual appeal and branding of the e-commerce platform.

Future Roadmap

Enhanced User Experience

• Interactive Product Displays: Implement interactive product displays with image galleries and detailed product information.
• Advanced Filtering and Sorting: Enhance product browsing with advanced filtering and sorting options for a personalized shopping experience.
• Real-time Updates: Explore real-time updates for cart modifications and order status changes to provide users with instant feedback.

Payment Gateway Integration

• Stripe Integration: Integrate with the Stripe API for secure and seamless payment processing.
• Payment Confirmation: Implement features for users to receive confirmation and updates on successful payments.

Accessibility and Internationalization

• Accessibility Features: Implement accessibility features to ensure a user-friendly experience for all users, including those with disabilities.
• Internationalization Support: Explore internationalization features for supporting multiple languages and currencies.