ReactProject System Requirements Document

1. Introduction

This document outlines the system requirements for the ReactProject, a multi-page React application. The objective is to build a fully responsive application using Vite that replicates the official LiGHT website. The project will utilize React, React Router DOM, and Tailwind CSS, with a focus on creating a clean, component-based architecture without the use of Bootstrap.

2. System Overview

The system is a multi-page web application designed to replicate the LiGHT website's functionality and layout. It will include several pages, each with specific features and components, and will be built using modern web technologies to ensure responsiveness and dynamic content rendering.

3. Functional Requirements

As a developer, I want to:

• Home Page (/):

  • Implement a hero section with a slider.
  • Include animated counters for centers, states, and members.
  • Feature sections with cards and call-to-action buttons.

• Members Page (/members):

  • Fetch and display data from the LiGHT website.
  • Create a hierarchical member card layout with images, names, and designations.
  • Include a "Senior Executive Members" section.
  • Use a responsive grid layout and dynamic rendering with .map().

• Initiatives Page (/initiatives):

  • Implement horizontal scroll carousels for featured initiatives.
  • Add card hover effects with scale and shadow.
  • Maintain a clean UI similar to the LiGHT website.

• Contact Page (/contact):

  • Develop a contact form with fields for Name, Email, and Message.
  • Implement form validation using React state.
  • Display a toast/success notification upon form submission.
  • Show a loading state on the submit button.

• Join Us Page (/join):

  • Design a CTA-based layout with info cards highlighting reasons to join and benefits.
  • Ensure a simple and clean UI.

• About Page (/about):

  • Provide an organization overview.
  • Include a timeline/story section.
  • Present mission and vision blocks.

• Reference Website:

  • Ensure the application replicates the functionality and layout structure of the official LiGHT website (https://www.light.gyws.org).

Reusable Components:

• Create reusable components for Navbar, Footer, Cards, and Buttons.
• Highlight the active route using useLocation().

Additional Features:

• Ensure the application is fully responsive with a mobile-first design.
• Maintain a clean folder structure with separate directories for components, pages, data, and assets.
• Store data in the /data folder and fetch it dynamically using .map().

Bonus Features (Optional):

• Implement scroll animations using AOS or Framer Motion.
• Add a dark mode toggle with persistence via localStorage.
• Enable carousel swipe support on mobile devices.
• Implement page transitions and a scroll-to-top button.

Deployment:

• Deploy the application using Vercel or GitHub Pages.
• Push the code to a GitHub repository.

4. User Personas

• Developer: Responsible for building and maintaining the application, ensuring it meets all functional and non-functional requirements.

5. Core User Flows

Developer Flow:

1. Set up the project using Vite and configure React Router for navigation.
2. Develop each page according to the specified requirements, ensuring responsiveness and dynamic content rendering.
3. Implement reusable components and ensure consistent styling across the application.
4. Test the application for functionality and responsiveness on various devices.
5. Deploy the application and submit the GitHub repository link.

6. Visuals Colors and Theme

• primary: #1E3A8A (Deep Blue)
• primary_light: #3B82F6 (Light Blue)
• secondary: #F59E0B (Amber)
• accent: #EF4444 (Red)
• highlight: #FBBF24 (Gold)
• bg: #F9FAFB (Light Gray)
• surface: rgba(255, 255, 255, 0.8) (White)
• text: #111827 (Dark Gray)
• text_muted: #6B7280 (Muted Gray)
• border: rgba(209, 213, 219, 0.2) (Light Gray)

7. Signature Design Concept

The homepage will feature an interactive 3D carousel using @react-three/fiber and @react-three/drei. Users can navigate through the carousel by clicking and dragging, with each section of the carousel representing a different page of the website. The carousel will have smooth transitions and animations, creating an engaging and immersive experience. The background will subtly change colors based on the time of day, providing a dynamic and visually appealing interface.

8. Interaction Model & Motion Direction

• Interaction Model: Parallax
• Implement smooth transitions and animations using AOS or Framer Motion.
• Ensure intuitive navigation with clear visual feedback for user interactions.

9. Non-Functional Requirements

• The application must be responsive and perform well on various devices and screen sizes.
• Ensure accessibility with ARIA labels and keyboard navigation support.

10. Tech Stack

• Frontend: React.js with Vite setup
• Styling: Tailwind CSS
• Routing: React Router DOM
• State Management: useState, useEffect, useRef
• Deployment: Vercel or GitHub Pages

11. Assumptions and Constraints

• The application must not use Bootstrap.
• The design does not need to be pixel-perfect but should maintain the same functionality and layout structure as the LiGHT website.
• All data must be stored in the /data folder and rendered dynamically.

12. Glossary

• Vite: A build tool that provides a faster and leaner development experience for modern web projects.
• React Router DOM: A library for routing in React applications.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• useState, useEffect, useRef: React hooks for managing state and lifecycle in functional components.