Light

kumiko-haraguchi / live-jazz-tokyo Goto Github PK

View Code? Open in Web Editor NEW

10.0 0.0 1.0 7.8 MB

🎷 The easiest way to find local Jazz events around your area in Tokyo!

Home Page: https://live-jazz-tokyo.herokuapp.com/

JavaScript 81.65% HTML 1.89% CSS 16.46%

react redux material-ui express postgresql knex stripe oauth2 heroku facebook-signup atomic-design fullstack

live-jazz-tokyo's Introduction

Live Jazz Tokyo

How come finding local jazz events and booking one is so difficult in Tokyo? This is a simple app to find local jazz events happening around your area tonight. Click the event you are interested, check the detail then book it straight away!

Getting Started

Prerequisites

node > 8.0.0
yarn
PostgreSQL

1. Installing

git clone https://github.com/kumiko-haraguchi/live-jazz-tokyo.git
cd live-jazz-tokyo
yarn install

2. Creating DB & Running migration & Seeding dummy data

psql
# CREATE DATABASE livejazz
# \c livejazz

yarn migrate
yarn seed

3. Running Dev & API servers

yarn frontend
yarn backend

=> You'll see the map on http://localhost:3000! 🗺💃

How do I book a ticket with a fake credit account?

Put 4242 4242 4242 4242 for Card Number

=> You can book a (fake) event!!!🎉

Built With

React - Frontend
Redux - State Management
Material UI - UI Component
Atomic Design - Component Design
Express - Backend
PostgreSQL - Database
Knex - Query Builder
Stripe - Online Payment
Hello.js - OAuth2
Yarn - Dependency Management
Heroku - Continuous Integration / Continuous Deployment

live-jazz-tokyo's People

Contributors

Stargazers

Forkers

ryutaudo

live-jazz-tokyo's Issues

Handle multiple event images

Event table - Event_img table is One to Many

Add foreign key for event.id to Event_img table.
Remove event_img field from Event table
Join those two tables, select and add event images to event object on GET eventDetails
Add carousel (front end)

Use webpack instead of create react app to use stage 1 preset

want to use arrow function in class to make the code simpler
https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb

Improve basic design

- Improve repetitive tags
- Remove paper for artist on event detail page
- Change marker color after reserved event
- Add thumbnail for profile
- Improve user & order history design

Set process.env.XXX by using .env files

STRIPE_KEY - src/index.js apiKey
FB_APP_ID - config/hello.js
JWT_KEY & JWT_APP - server/route/auth.js

Add Fragments to User, MyMarkerList and MyInfoWindow

Add more server test

Prev event details appears before next event details gets rendered

Improve performance

Improve Component design

use sass
improve component design, use Atomic design?

Change Marker Design to music note

Improve Error Handling in API

user next function when catch an error
create a wrapping function to handle errors on Async Await Routes
https://medium.com/@Abazhenov/using-async-await-in-express-with-node-8-b8af872c0016

Refactor current code

Just improve current code, do not add any features

server --> done 1/12
client

Use ORM for DB

bookshelf or sequelizejs
http://docs.sequelizejs.com/

Use Flow (Fix PropType check and initial state setting)

Set Cron task to update dummy data once a month

https://dev.classmethod.jp/server-side/cron/

Make components functional component - dumb

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.