Skip to content

Latest commit

 

History

History
49 lines (32 loc) · 2.94 KB

README.md

File metadata and controls

49 lines (32 loc) · 2.94 KB

NTU Software Engineering Project 2

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

Springmart Logo

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.