Your project this week is to build the front end to consume the RESTful API you designed and built last week. You should think and plan what features and look you want to your quiz app to have. You might considered making some wire frames or a prototype using a tool like Figma.

User Stories

As a quizzer, I want to:

• Begin a quiz session with randomly generated questions.

• Filter quiz questions by subject and difficulty.

• Select a chosen number of questions.

• See a summary of my results after completing a quiz.

• Add, edit, and delete quiz questions and answers.

Stretch user stories

• Like particular questions and filter by this category.

Acceptance Criteria

• Provide an engaging, intuitive user interface.

• Allow users to take quizzes based on category, difficulty and count.

• Allow users to add and delete questions from the 'database'.

• Follow React principles and best practices.

Stretch criteria

• User local storage to allow for records to persist after browser refresh.

• Make custom hooks to encapsulate repetitive logic i.e. fetch data or adding to local storage.

Repository naming convention

Please name your repo following this template: PRO03_FRONT_Name1_Name2_Name3_Name4

React

• Learn how to integrate TypeScript with a React (S1, S11, S16)

• Understand the concepts of components, props, and state in React (K7, S8, S12)

• Implement routing in a single-page application using React Router (S1, S11, S16)

• Manage global state and side-effects in React applications (S1, S11, S16)

• Create reusable UI components and manage their lifecycle (S1, S2, S8)

• Handle asynchronous operations and manage data fetching in React (S1, S11, S16)

• Follow best practices in React development (S1, B3, B9)

Node

• Set environment variables and understand their use case (S10, K11, B3)

Software Architecture

• Draw a diagram representing the flow of our application (S8, K11, B7)

• Follow a consistent pattern for naming our folders, files and variables (S1, K11, B3)

React

• A framework agnostic tool that allows for quick setup of a React app with TS

• Official React docs on typescript with interactive examples

• A quick reference guide to basic React patterns

• A more guided resource of this material

• A powerful hook for passing state values in your application without prop drilling

Figma

• Basic exercises for beginners

This week focuses on building a front-end application using React and TypeScript to consume the RESTful API developed in the previous week. The emphasis is on creating an intuitive user interface for the quiz application while applying React best practices and TypeScript integration.

Workshops

• Cypress courses (x4). Repo name: Work17_Cypress

Execute Program

• Finalize incomplete courses

Topics

• React fundamentals (components, props, state)

• TypeScript integration with React

• React Hooks (useState, useEffect, custom hooks)

Project

• Build a front-end interface for the quiz application

• Implement user stories for quiz functionality

• Integrate with the backend API developed in the previous week