Skip to content

MERN Stack, HTML, CSS, JEST, API, Google Map Integration

Notifications You must be signed in to change notification settings

MaJaWh/ChargeUp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Contributors Downloads LastCommit

Logo

Charge Up

A simple app linked to the government Vehicle Charging API. Chargers can be filtered on distance from location and plug type. You can also create a user account and sign in and out using email and password
· Report Bug ·

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Contact
  5. Acknowledgments

About The Project

The final project of our Manchester Codes Software Engineering Bootcamp. We tasked ourselves with putting together an app which could search any country in the world for all the EV charging sites. We hoped it would then be possible to use various filter methods to find and navigate to your desired charging station. We hoped to build the frontend using React and the native React Testing Library. The backend would be built using Express, Mongoose and MongoDB. Using the MERN stack we hoped that we would have pleanty of up to date documentation to work from.

(back to top)

Built With

  • Java-script
  • Node.js
  • React.js
  • CSS
  • HTML

(back to top)

Getting Started

Prerequisites

Please use the below to set of instructions to get your project up and running

  • npm
    npm install npm@latest -g

Installation

  1. Clone the repo into your chosen file
    $git clone https://github.com/MaJaWh/evtest
  2. CD into database and Install NPM packages
    $npm install
  3. CD into evtest and Install NPM packages
    $npm install

Testing

  • Testing
    $npm test

Running the Development Server

  1. Enter your API in .env in evtest. If you dont have an API key you will see a development only map
    REACT_APP_GOOGLE_MAPS_EMBED_API_KEY = 'ENTER YOUR API';
  2. From evtest run
    $npm start

Running the Server

  1. From database run
    $npm start

Using The App

  1. Opening the app you will be directed to the LandingPage and asked to create a user.

  2. If you successfully create a user you will be directed to the dashboard.

  3. Here you get an alert askeing you to allow location services and the map shoudl center on your location.

  4. You can then enter your home town and set the distance in miles you would liket o search from your location.

  5. Pressing the plug type button you can then toggle on and off the locations which match your plug type. Some plug types are more popular than others.

  6. If you like you can remove the search window by clicking the SearchForm button at the bottom of the page.

(back to top)

Usage Examples

(back to top)

Roadmap

Frontend

  • Create a more informative landing page
  • [ ]
  • Feature 3
    • Nested Feature

Backend

  • Complete reset password function
  • Complete add a new car route
    • Add an 'update users car' route
  • Create function so the user can add an image to thir profile.
    • Display the users image on the header bar.
  • [ ]

(back to top)

Contact

Mark Whitehead - @mjamesw2010

Ben Seed -

Project Link: https://github.com/MaJaWh/evtest

(back to top)

About

MERN Stack, HTML, CSS, JEST, API, Google Map Integration

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages