Coder Social home page Coder Social logo

benjamin-mueggenburg / motoparking Goto Github PK

View Code? Open in Web Editor NEW

This project forked from nosovsh/motoparking

0.0 1.0 0.0 1.31 MB

Web app that helps bikers to find motorcycle parking

Home Page: http://www.motoparking.club

CSS 8.05% JavaScript 76.29% Python 13.53% HTML 2.13%

motoparking's Introduction

Motoparking.club

Web app that helps bikers to find nearest secure motorcycle parking.

Check it here: http://www.motoparking.club

Installaion

npm install
pip install -r requirements.txt

Running dev server with hot reloading

npm run dev in one console

python main.py in another

Deploying to Heroku

Create heroku app, create mongo database.

Create heroku config vars: PROD_MONGODB, MONGODB_DB, SECRET_KEY, SECURITY_PASSWORD_SALT.

Deploy the code: git push heroku master

Frontend

Frontend is writen using React.js, Fluxxor, Webpack, Leaflet.js, Babel, postCSS

File structure

components/ – React components.

components/dump/ – dump React components. Just view layer. They don't have access to the global state. Everything should be passed to them throught props.

components/smart/ – smart React components. They have access to the global state and pass portions of the state down to dump components. They don't have any visual representation and don't have any css styles. (Map.jsx is exception and should be refactored)

flux/ – FLUX packages. Each package has actions, constants, client and store

styles/ – global and common styles.

Styles

BEM methodology is used for styling. Convention: BlockName_ElementName_modifierKey_ModifierValue and BlockName_ElementName_booleanModifier

Styling of any component should be done in the file ComponentName.css in the same directory as component file.

Run npm run csslint to fix any css files with csscomb.

Code style

Run npm run lint to check code.

eslint-config-airbnb is used with some modifications. "vars-on-top": 0 to make migration to let and const more easy. "quotes": [2, "double", "avoid-escape"] because I hate single quotes. See .eslintrc for more.

Server side

Server is writen in Python using Flask framework and MongoDB. Server was developed in a short period of time so it is not perfect. It will be refactored soon.

All code is inside server/motoparking/ directory.

TODO:

  • ES2015
  • postCSS
  • refactor css
  • refactor map components and store to make them more reactive
  • make stores more functional, without side effects to make migration to Redux more easy
  • refactor server side code

And yes I'm looking for the next React.js project ;)

Do you have one?

[email protected]

motoparking's People

Contributors

greenkeeperio-bot avatar nosovsh 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.