This repository contains the frontend of the Berlin IoT Hub of Technologiestiftung Berlin. It is built using Create React App (CRA), TypeScript, visx, and a wrapper for Mapbox GL.
The API for retrieving data can found in a different repository.
Clone this repository, then on the root level create a file named .env and fill in the required values (see .env.example for a reference).
Currently we are not calling the actual API in dev mode, so the .env.development file (that comes with the repository) redirects API calls to our mock service worker.
Run npm install to install all required dependencies and then npm start to start developing locally. All available script can be found further down.
The folder structure follows CRA's recommendations.
src/App.tsx contains the routes/views that are currently available. The views themselves are simply React components that can be found in src/components. All other components can be found there as well.
Requests to the API are defined in src/lib/requests.ts and called in currently three places:
src/state/store.ts(for fetching all projects to be displayed on the homepage)src/components/Project.tsx(for fetching records of all devices associated with the project)src/components/ProjectPreview.tsx(for fetching the records of one project device, to be displayed in the project preview)
The requests are constructed following this pattern:
{API_URL}/api/{API_VERSION}/route/to/endpoint
The API version can be defined in src/lib/requests.ts.
This project uses Theme UI for styling. Main style definitions can be found in src/style/theme.ts. The theme can be referenced in every component. For visual consistency, definitions from the theme should be used whenever possible. Information about using the theme can be found in Theme UI's docs.
New features, fixes, etc. should always be developed on a separate branch:
- In your local repository, checkout the
mainbranch. - Run
git checkout -b <name-of-your-branch>to create a new branch (ideally following Conventional Commits and with a reference ID). - Make your changes
- Push your changes to the remote:
git push -U origin HEAD - Open a pull request.
The frontend is currently deployed to netlify. Pushing to the main branch will automatically trigger a new deploy (this should be avoided, if possible).
This project was bootstrapped with Create React App (CRA), the following section originates from CRA's docs, but still applies to this repository.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.