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.