/eventio

A web app that allows registered users to sign up for and create events.

Primary LanguageTypeScriptMIT LicenseMIT

Eventio



A web app that allows registered users to sign up for and create events.

MIT License


Getting Started

Clone the repository.

git clone git@github.com:ythecombinator/eventio.git

cd into the directory.

cd eventio

Install the project dependencies:

yarn

# or

npm install

Create a .env file like the following:

APP_NAME="Eventio"
API_URL="https://testproject-api-v2.strv.com"
API_KEY="<YOUR API KEY>"

Start the development server:

yarn dev

# or

npm run dev

🚀 Head over to localhost:3001 in your browser of choice.

Structure

|-- components/
|   |-- Account/
|   	|-- index.tsx // Main logic
|   	|-- styles.ts // Styled views
|   |-- ...
|-- config/
|   |-- environment.ts
|-- core/
|   |-- rootReducer.ts
|   |-- rootSaga.ts
|   |-- store.ts
|-- hocs/
|   |-- index.ts
|   |-- withLoginCheck.tsx
|   |-- ...
|-- layouts/
|   |-- Meta/
|   |-- index.ts
|   |-- ...
|-- modules/
|   |-- auth/
|   	|-- components/
|   	|-- pages/
|   	|-- actions.ts
|   	|-- models.ts
|   	|-- reducers.ts
|   	|-- sagas.ts
|   	|-- selectors.ts
|   	|-- services.ts
|   |-- ...
|-- pages/
|   |-- ...
|   |-- events.tsx
|   |-- sign-in.tsx
|-- static/
|-- styles/
|   |-- animations.ts
|   |-- ...
|-- utils/
|   |-- cookies.ts
|   |-- ...

Where:

  • components/: Components reused across pages
  • core/: Main redux stuff
  • hocs/: Reusable HOCs
  • layouts/: Reusable Layouts
  • modules/: Each isolated functionality, organized into: components; next.js pages; TypeScript interfaces, models and related; Redux reducers, actions, selectors and sagas and API services
  • pages/: Pointers to pages from each module
  • static/: Next.js static assets
  • styles/: Mixins and other styled components stuff
  • utils/: Helper functions reusable accross the project

Toolbelt

  • Typescript for compile-time safety and code scalability with Interface oriented development
  • Next.js for Server Side Rendering, prefetching, dynamic imports and other features out-of-the-box
  • Redux to manage application state
  • redux-saga as a middleware to make application side effects easier to manage
  • redux-act to reduce action creators boilerplate and to have a more expressive syntax for reducers
  • immer as a simpler alternative for immutable state
  • Built with Webpack
  • Hot Module Replacement (HMR) for components, reducers and sagas
  • Transpiled with Babel
  • styled-components as a CSS-in-JS strategy
  • Heroku to deploy production environment
  • Workbox to generate service-worker and runtime caching

Roadmap

  • Login and Authorized State
  • Event List
  • Create Event
  • 404 Page
  • Sign Up
  • Reset Password
  • Event details
  • My Profile

Next steps should be:

  • Create Event (due from last sprint)
  • Implement each other page according to priority order

A few notes on technical decisions

I tried to balance the following three aspects the most I could when it comes to picking to picking the project stack:

  • The tech stack already running at STRV
  • The tech stack I am already used to
  • The tech that makes sense for the project

Special attention goes to the state management choice: a simpler alternative (e.g. React Hooks + Context API) could have been used instead of redux but two aspects guided me:

  • Altough there are uncountable alternatives for redux as 2019, it's still a solid alternative for state managament
  • I was told in the project specification to treat this app as an MVP of a much larger project that could scale and grow one day – and redux does scale well

License

eventio is distributed under the MIT License, available in this repository.

All contributions are assumed to be also licensed under the same.