More Premium Hugo Themes Premium React Themes

React Exercises

Exercise DB with React & Material-UI

React Exercises

Exercise DB with React & Material-UI

Author Avatar Theme by alex996
Github Stars Github Stars: 92
Last Commit Last Commit: Jun 4, 2021 -
First Commit Created: Jan 15, 2024 -
React Exercises screenshot

Overview

The react-exercises project is a database app built with React and Material-UI using Webpack and Babel. It was completed in late 2018 before React hooks came out. The project is divided into different branches, each focusing on a specific topic or feature. There are also references available including YouTube videos, a Medium article, and CodeSandbox links.

Features

  • Grid Layout: Includes an intro to grid layout in the first two episodes.
  • Data Store: Covers lists, tabs, and typography in episodes three and four.
  • Dialogs and Icons: Explores dialogs and icons in episodes five and six.
  • Forms, Inputs, and Styling: Covers forms, inputs, and styling in episode six.
  • Lists and IconButtons: Explores lists and icon buttons in episodes seven and nine.
  • CSS-in-JS: Covers CSS-in-JS and styling with JSS in episode ten and eleven.
  • Theming: Covers theming in episodes twelve, thirteen, and fourteen.
  • Context API: Explores the use of Context API in episode fifteen.

Installation

To install and set up the project, follow these steps:

  1. Clone the repository.
  2. Navigate to the project directory.
  3. Run the command yarn start or npm start to serve the app at localhost:4000 and watch files for re-building the bundle.
  4. Run the command yarn build or npm run build to build a production bundle in the dist folder.
  5. Run the command yarn stats or npm run stats to generate a Webpack stats JSON file and render a dependency treemap.
  6. Run the command yarn serve or npm run serve to statically serve the contents of the dist folder.

Summary

The react-exercises project is a database app built with React and Material-UI. It covers various features and topics such as grid layout, data store, dialogs, forms, theming, and more. The project provides different branches for specific topics and includes references such as YouTube videos, a Medium article, and CodeSandbox links. Installation and setup instructions are also provided.