Git Product home page Git Product logo

neighborhood-map-react-'s Introduction

Asian Food

Asian Food Map project as part for final Project for Udacity Front End Web Developer Nano Degree Program (Neighborhood Map in react)

Usage guide

This project use TypeScript for details check on typescriptlang.org
Service Worker only works on production! Build project before if you want to test it!

Installation

  • Tools requed for project usage
    1. NodeJS - https://nodejs.org/
    2. CodeEditor (eg, WebStorm, VSCode, Atom)
    3. GIT client (eg. https://git-scm.com)
    4. And old fashion Console/Terminal
  • clone project to your pc git clone https://github.com/BeroBurny/Neighborhood-Map-React-.git
  • navigate inside project folder (cd Neighborhood-Map-React-)
  • install all project dependencies with npm install (or yarn install)
  • after complete project installation open open second console and navigate to project folder
  • then navigate into cd RESTful folder
  • install all RESTful dependencies whit npm install (or yarn install)
    • install MongoDB for database (here is guide => guide link )
  • after complete project installation run RESTful Server (Backend-API) npm start (or yarn start)
  • when server start you will receive message like that
    neighborhood-map RESTful API server started on: http://localhost:3001/
    write address from end od message http://localhost:3001/ (you gonna need for .env)
  • Return to first console but second one need remain running!
  • Setup Project environment variables.
    • create file .env in root of project
    • add REACT_APP_MAPBOXACCESSTOKEN=[your MapBox key] => MapBox.com
    • add REACT_APP_API_BASE_URL=[Back-End URL] for Back-End URL like http://localhost:3001/ (<= you can use if you use default settings for back-end)
  • And now you are ready to go... if you want test project is skip this step... start development server if you want to continue working on a project
    • start the development server with npm start (or yarn start)
  • Deploying product for production
    • build project whit npm build (or yarn build)
  • install local server npm install -g serve (or yarn global add serve)
  • start local server serve -s build and navigate to
  • open favorite browser and enter address http://localhost:5000
    • happy exploring! ๐Ÿ˜
    • Enjoy in offline experience whit service worker ๐Ÿ˜œ
Package used in project

Back-End Server

Back-End server is simple Express server based on nodeJs. Required for Front-End application
For installing it navigate inside RESTful folder and make npm install (or yarn install)
Server use MongoDB for database if you need one here is guide => guide link
Then start server whit npm start (or yarn start)
(In case you need change setting for a server you can use environment variables, check server.mjs for list)

Credits

Front-End and Back-End writer Bernard "@BeroBurny" Stojanovic

neighborhood-map-react-'s People

Contributors

beroburny avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.