react-leaflet-filter

• react-leaflet-filter
  • Introduction
  • Quick Start
  • Documentation
    • Folder structure
    • Development steps

Introduction

This project was built with simple-react-full-stack boilerplate.

This is a simple React application with a Node.js and Express backend. The UI it's using Material-ui, grafs are displayed using Recharts and Redux for the state management. Map it's displayed using React-Leaflet. The application is configured with Airbnb's ESLint rules and formatted through prettier.

Quick Start

# Clone the repository
git clone https://github.com/roedit/react-leaflet-filter

# Go inside the directory
cd react-leaflet-filter

# Install dependencies
yarn (or npm install)

# Start development server
yarn dev (or npm run dev)

# Build for production
yarn build (or npm run build)

# Start production server
yarn start (or npm start)

Documentation

Folder Structure

All the source code will be inside src directory. Inside src, there is client and server directory. All the frontend code (react, css, js and any other assets) will be in client directory. The client forder is fallowing the redux folder structure - actions | reducers Backend Node.js/Express code will be in the server directory. We load the boat_ramps.geojson content to serve the client for data

Development Steps

1 Create the project structure 2 Setup the material ui layout 3 Display the map 4 Display the charts 5 Filter data based on viewport