Assignment 5 (Front-end)

Project Overview:

You are tasked with implementing a responsive website based on the provided Figma design. The website should include the following sections: Navbar, Header, Our Services, Event Items, Gallery, Pricing, Review, Recent Events, and Footer. If the Figma file includes extra sections, make sure to include them in your website too. This way, you're building exactly what the design suggests.

Landing Page:

1. Navbar: A navigation bar at the top of the page to navigate between different sections.
2. Header: A visually appealing header section introducing the purpose of the website.
3. Our Services:
   • Display services dynamically fetched from an API.
   • Use Tanstack Query for efficient data fetching and state management.
4. Event Items:
   • Display upcoming events with relevant information.
   • Utilize Tanstack Query for data handling.
5. Gallery: Showcase images related to your services or events.
6. Pricing: Present pricing details for the services offered.
7. Review: Display customer reviews or testimonials.
8. Recent Events:
   • Highlight recent events dynamically fetched from an API.
   • Use Tanstack Query for data management.
9. Use your creativity: Elevate your project by adding at least two unique sections that contribute meaningfully to the website's theme.
10. Footer: A footer with relevant links and information.

Dashboard Section:

• Create an intuitive and visually appealing dashboard.
• Prioritize a user-friendly layout and color scheme.
• This will be a public or open route for this assignment.
• There will be at least two page under the dashboard.
• You are required to implement at least two options (from below 3 options), but you have the flexibility to incorporate all of them if needed.

  1. Event Items Management:

     Display event items with CRUD operations:

     • Create: Add new events Item.
     • Read: List upcoming events Item.
     • Update: Edit event item details.
     • Delete: Remove event Item.

  2. Recent Event Management:

     Display upcoming events with CRUD operations:

     • Create: Add recent events.
     • Read: List recent events.
     • Update: Edit event details.
     • Delete: Remove event.

  3. Service Management:

     Provide an overview of services with CRUD operations:

     • Create: Add new services.
     • Read: List available services.
     • Update: Edit service details.
     • Delete: Remove services.

Note: Employ Tanstack Query for effective data handling and state management in your project. Utilize queries to efficiently fetch and update data, ensuring real-time updates for a seamless user experience. Feel free to expand the dashboard functionality by adding more relevant pages if desired.

Technical Requirements:

1. API Integration:

   • Fetch service and event data from a RESTful API.
   • Utilize Tanstack Query for efficient data management.

2. Responsiveness:

   • Ensure the website is responsive and accessible for tab and mobile devices.

3. Animation:

   • Elevate the overall user experience by incorporating subtle and purposeful animations throughout your landing page. Must need to add at least 2 animation.

   • Integrate animations that are relevant to the theme and purpose of your website. Consider animations that enhance the visual appeal and engagement of users.

   • You can use any kind of animation library or framework.

   • Animation Libraries/Frameworks Examples:

     1. Framer Motion:
        • Usage: Apply Framer Motion for smooth and interactive animations.
        • Example: Use Framer Motion to create a captivating entrance animation for the main headline in the Header section, where the text gracefully fades and scales into view.
     2. AOS (Animate On Scroll):
        • Usage: Implement AOS to trigger animations as users scroll down the page.
        • Example: Apply AOS to the Our Services section, causing service cards to slide in or fade as they enter the user's viewport during scrolling.
     3. Anime.js:
        • Usage: Apply Anime.js for lightweight and flexible animations.
        • Example: Implement Anime.js to add a subtle bounce effect to pricing plan elements in the Pricing section when users hover over them.
     4. React Spring:
        • Usage: Integrate React Spring for physics-based animations.
        • Example: Use React Spring to create a gallery image carousel in the Gallery section, where images slide and fade with a natural, physics-inspired motion.

     Feel free to explore these animation libraries/frameworks and choose the one that aligns best with your project's needs. Each has its unique features and advantages, allowing you to create captivating and responsive animations.

4. Technology Stack:

   • TypeScript
   • React

5. User Interface (UI):

   • Implement the UI as per the provided Figma design. Aim for a "pixel-perfect" design, ensuring that every element aligns precisely with the original design, leaving no room for discrepancies in size or placement.

Submission Guidelines:

• Submit a well-documented codebase with clear comments.
• Make sure to add a README file that explains how to set up and use the application. In the README, include details like the project name, live URL, features, technology used, and other important information. Try to make it look professional by doing some research and making it appealing.

Submission:

• Provide the Private GitHub repository (in Github Classroom) links of the front-end and back-end and ensure there is a README file with explicit instructions for running the application locally.
• Live deployment link
• Submit a demo video showcasing the functionality of the Inventory Management Dashboard.

Github Private Repo (Github ClassRoom):

• For Client(Frontend): https://classroom.github.com/a/U6HuF_ny
• For Server(Backed): https://classroom.github.com/a/fTgQZixr

Assignment Number based on the Last Digit of PH Student ID:

Last Digit of PH Student ID	Assignment Number (Design No)
0, 1	1
2, 3	2
4, 5	3
6, 7	4
8, 9	5

Figma Files:

• Design-1: https://github.com/Apollo-Level2-Web-Dev/L2-B2-Assignment-5-Frontend/blob/main/Designs/Design-1.fig

• Design-2: https://github.com/Apollo-Level2-Web-Dev/L2-B2-Assignment-5-Frontend/blob/main/Designs/Design-2.fig

• Design-3: https://github.com/Apollo-Level2-Web-Dev/L2-B2-Assignment-5-Frontend/blob/main/Designs/Design-3.fig

• Design-4: https://github.com/Apollo-Level2-Web-Dev/L2-B2-Assignment-5-Frontend/blob/main/Designs/Design-4.fig

• Design-5: https://github.com/Apollo-Level2-Web-Dev/L2-B2-Assignment-5-Frontend/blob/main/Designs/Design-5.fig

• Responsive Design: https://github.com/Apollo-Level2-Web-Dev/L2-B2-Assignment-5-Frontend/blob/main/Designs/Responsive%20Design%20Demo.fig

Feel free to draw inspiration from the "Responsive Design" Figma file for your responsive design concept. However, it's crucial to implement your own design, personalized based on your student ID.

Deadline:

• 60 marks: January 29, 2024 11.59 PM
• 50 marks: January 30, 2024 11.59 PM
• 30 marks: After January 30, 2024 11.59 PM

Important Note:

Plagiarism will not be tolerated. Ensure that the code you submit is your own work. Any instances of plagiarism will result in 0 Marks.

Good luck with your assignment! If you have any questions, feel free to reach out for clarification.