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

• SQL

Topics

• React fundamentals (components, props, state)

• TypeScript integration with React

• React Hooks (useState, useEffect, custom hooks)

• React Router for single-page application navigation

• Asynchronous operations and data fetching in React

• State management in React applications

• Creating reusable UI components

• Accessibility practices in React

• Environment variable management

• Software architecture and application flow

• Best practices in React development

• User interface design and prototyping (e.g., using Figma)

• Local storage for data persistence

• Custom hooks for repetitive logic

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

• Focus on user experience and interface design

• Apply React and TypeScript best practices

• Ensure accessibility compliance

• Implement proper error handling and data validation

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.

• Follow good accessibility practices.

• Hidden environment variables (i.e. not on GitHub).

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

• React Mindset

• Youtube React Course (Net Ninja)

• Creating a React app with Vite

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

• React Docs

  Official React docs on typescript with interactive examples

• React/Typescript Cheat-sheet

  A quick reference guide to basic React patterns

• Free Code Camp React/TS guide

  A more guided resource of this material

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

Figma

• Figma

  Basic exercises for beginners

• Figma Youtube tutorial. 0:16

• Figma Youtube tutorial. 0:24

• Figma Youtube tutorial. 1:13