https://github.com/imevanc/pub-radar
https://github.com/imevanc/pub-radar
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/imevanc/pub-radar
- Owner: imevanc
- Created: 2022-05-12T11:28:12.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-30T15:33:14.000Z (about 3 years ago)
- Last Synced: 2025-03-26T18:54:44.067Z (10 months ago)
- Language: JavaScript
- Size: 71.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pub-Radar
This is a JS application created with Material-UI, React.js & axios.
# Table of contents
- [Pub-Radar](#pub-radar)
- [Table of contents](#table-of-contents)
- [General-Information ](#general-information-)
- [Tech Stack ](#tech-stack-)
- [Setup ](#setup-)
- [Dependencies ](#dependencies-)
- [Installation ](#installation-)
- [Future-Work ](#future-work-)
The main purpose was to plot the locations of the pubs in Edinburgh, UK. I used uizard webpage for drafting a single-app page and wrote down state diagrams. The application was created with React.js and styled with the Material-UI framework. It is responsive and scalable; I considered both mobile and web views. If you enter into the responsive design from your browser, you can see changes on the design, as a few components are disabled when the screen resolution goes down.
The default page is the home page, where a user is logged in and they can change the mode of the webpage from light to dark. It's responsive for all users with the appropriate messages. The user can left-click on a beer marker and the will see the changes of that rendered on the pub card at the right hand side of the page. They need to right-click the same marker in order to disable the "clicked-message". The images are fetched from the Pexels API and the API coordination is done using proxy on create-react-app.
The custom error messages are svg files stored locally, which were taken from the undraw webpage. The react-router-dom package was used in order to coordinate errocard routes, when the user types an invalid path or the data is not fetched appropriately.
A form of state management was done using the useContext hook for storing the dark/light colour configurations and google map api setups.
```
JavaScript
React
Material UI
CSS
HTML
```
-> Please have a look at the list below in order to see the version of each dependency that the developer used. <-
```
- emotion/react: 11.9.0
- emotion/styled: 11.8.1
- mui/material: 5.6.3
- testing-library/jest-dom: 5.16.4
- testing-library/react: 13.1.1
- testing-library/user-event: 13.5.0
- react-google-maps/api: 2.10.2
- react-dom: 18.1.0
- react-router-dom: 6.3.0
- react-scripts: 5.0.1
- dotenv: 16.0.1
- http-proxy-middleware: 2.0.6
- react-avatar: 4.1.0
- web-vitals: 2.1.4
- axios: 0.27.2
- react: 18.1.0
- npm: 8.1.2
```
## Installation
To run this project you will need to clone this repository onto your local machine.
```
$ git clone https://github.com/imevanc/pub-radar.git
```
Navigate inside the folder and install all dependencies by entering the following commands on your terminal window:
```
$ cd pub-radar
$ npm install
```
To run the application locally enter:
```
$ npm start
```
The application will run on http://localhost:3000.
- Hosting on Netlify or similar services.
- Type Checking: There is no type checking at the moment. My next step as a junior developer is to become acquainted with Typescript.
- Configs File: A file where will consists of configurations of the widget.
- Create user profile and sign in sign up tools.