The assignment required creating a UI by using a backend service for displaying data from journeys made with city bikes in the Helsinki Capital Area. The backend is allowed to use a DB, or it can be memory-based. I preferred to use MongoDB as the memory-based will be quite slow and gave priority to building and running the application smoothly to display the data to the end-to-end users.
During this application development, I decided to use Redux for state management, studied it's documentation deeply and implemented it. I observed how it behaves consistently across client, server, and native environments. The state of my application is kept in a store, and each component can access any state that it needs from this store. I used Redux with my React application to maintain and update data across application for multiple components to share, all while remaining independent of the components.
Provided Data to be used with this assignment to complete.
City Bike Finland: data 1
City Bike Finland: data 2
City Bike Finland: data 3
Information about Helsinki Region Transport’s (HSL) city bicycle stations.
Dataset
License and information
The above-mentioned requirements are given to submit this assignment. The below-mentioned tick-marked requirements that I met.
Data Import:
- Import data from the CSV files to a database or in-memory storage
- Validate data before importing
- Don't import journeys that lasted for less than ten seconds
- Don't import journeys that covered distances shorter than 10 meters
Journey list view:
- Journey list view
- For each journey show departure and return stations, covered distance in kilometers and duration in minutes
- Pagination
- Ordering per column
- Searching
- Filtering
Station list:
- List all the stations
- Pagination
- Searching
Single station view:
- Station name
- Station address
- Total number of journeys starting from the station
- Total number of journeys ending at the station
- Station location on the map
- The average distance of a journey starting from the station
- The average distance of a journey ending at the station
- Top 5 most popular return stations for journeys starting from the station
- Top 5 most popular departure stations for journeys ending at the station
- ☐ Ability to filter all the calculations per month
Surprise points:
- Endpoints to store new journeys data or new bicycle stations
- ☐ Running backend in Docker
- Running backend in Cloud
- ☐ Implement E2E tests
- Added snapshots and integration tests instead of E2E tests
- Create UI for adding journeys or bicycle stations
My edition:
- Cycle Route with duration using
Mapbox - Travelling
- Contact form using
formcarry - Header
- Footer
N.B: Map & cNav[click any place in the map to display the trip duration]
./frontend
installation command react app: npx create-react-app frontend --template redux
- React
- React Router DOM
- React Redux
- RTK Query(Redux JS Toolkit)
- SASS
- Styled Components
- Material UI
- Mapbox GL
- formcarry
- formik
- yup
./backend
API documentation: https://documenter.getpostman.com/view/16481716/2s8Z6yYZD9
- Node
- Express
- Cors
- Mongoose
- Dotenv
- path
- REACT_APP_ACCESS_TOKEN
- REACT_APP_FORM_URL
- NODE_ENV
- MONGO_URL_DEV
- PORT
- CORS_ORIGIN
- SERVER_URL
- EMAIL_HOST_PASSWORD
- Nodemon
- VS Code
- Postman
- chai
- chai-http
- mocha
- enzyme
- enzyme-adapter-react-16
- react-test-renderer
To be able to set up and run the project needed to install it local computer and the required addresses to be used
Clone this repository
https://github.com/koushik80/city-bike
Change the directory
cd frontend
cd backend
Install all dependencies
npm install
Run the application
running frontend: npm start
running backend in development environment with nodemon: npm run dev
Possible changes to run in the development and production mode
Go to frontend folder-->features-->api-->apiSlice.js
Development:
const baseQuery = fetchBaseQuery({
- [x] baseUrl: `http://localhost:8080/api`, // for development
baseUrl: `/api`,
prepareHeaders: async (headers, {getState, endpoint}) => {
}
})
Production:
const baseQuery = fetchBaseQuery({
baseUrl: `http://localhost:8080/api`,
- [x] baseUrl: `/api`, // for production
prepareHeaders: async (headers, {getState, endpoint}) => {
}
})
Go to backend folder-->app-->app.js
Development:
app.get('/', (req, res) => {
res.status(200).json({
message: "This is JOURNEY REST API"
});
});
Production:
const __dirname1 = path.resolve();
if (process.env.NODE_ENV === "PRODUCTION") {
app.use(express.static(path.join(__dirname1, "/frontend/build")));
app.get("*", (req, res) =>
res.sendFile(path.resolve(__dirname1, "frontend", "build", "index.html"))
);
} else {
app.get("/", (req, res) => {
res.send("API is running..");
});
}
Home: http://localhost:3000
Journey: http://localhost:3000/journey
Stations: http://localhost:3000/station
Single Station: http://localhost:3000/station/:id
cNav(Cycle route & duration): http://localhost:3000/navigation
Contact: http://localhost:3000/contact
Full Stack Open 2022
Mapbox | Docs
Redux Toolkit
AVOINDATA.FI(HSL
Digital Synopsis
formcarry
HSL