Skip to content

Latest commit

 

History

History
55 lines (43 loc) · 2.56 KB

README.md

File metadata and controls

55 lines (43 loc) · 2.56 KB
Raw

Beartracks App

Beartracks App is a comprehensive React application designed to showcase various features and integrations for a fictional web application. Built with React, Redux and Tailwind CSS, the goal of this project is to demonstrate how to create a dynamic web application using modern serverless cloud technologies. It is inspired by the United States National Parks

View the Swagger API docs here.

This application covers a number of techniques including:

  • Functional component design
  • Usage of React hooks
  • Custom hooks
  • Performance optimizations including :
    • throttling techniques,
    • useCallback and useMemo.
    • lazy loading with Suspense
  • Redux integration
  • Redux Toolkit using createSlice and createApi
  • Custom Contexts
  • Utility first CSS

Installing the project

# Clone the project
$ git clone https://github.com/GreggSetzer/beartracks-app.git

# Install dependencies
$ npm install

# Test project
$ npm test

# Build project
$ npm build

Tools and Technologies

  • React: A JavaScript library for building user interfaces, ensuring efficient updates and rendering of components.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development, allowing for a highly customizable and responsive design.
  • TypeScript: A statically typed superset of JavaScript, providing type safety and better development tooling.
  • Jest: A delightful JavaScript testing framework with a focus on simplicity, used here for unit testing the components.
  • Testing Library: A set of utilities for testing React components, promoting best practices by testing the components from the user's perspective.
  • ESLint: A tool for identifying and fixing problems in JavaScript code, integrated with TypeScript support to maintain code quality.
  • Prettier: An opinionated code formatter, ensuring a consistent code style across the project.
  • Redux Toolkit: The official, opinionated, batteries-included toolset for efficient Redux development

Project Structure

The project is organized as follows:

  • src/app: Contains the Redux specific logic.
  • src/common/: Contains common components, contexts, hooks, and types.
  • src/features: Contains the page components organized by feature.