JoinIn

a graphQL/React based event-app

I started following Max' great tutorial for building a graphQL API and use it in a React fronted.

Over time I thought, it would be nice to bring it to a bigger and more complex project... and here it is: JoinIn - a simplified meet up clone, that allows you and your friends to create and join public events.

Check out the current Demo.

It includes the following technologies & libraries:

Backend

• node.js
• express
• graphQL
• mongoDB
• mongoose
• DataLoader
• jwt
• bcrypt

Frontend

• react
• react-router
• classnames
• react-textfit
• simplebar

I choose to do the projects styling using SASS. Therefore, I took advise from https://sass-guidelin.es/ and some inspiration from this great example showing how to use SASS in React. Additionally, I included cypress to integrate end-to-end testing in the development.

---

Project Progress

Starting from the tutorial I planed/made following changes:

API

• User: add profile picture
• Events: add location & teaserimage, remove price
• Events: setup Attendees and handle connection to Users
• Unify Dataloaders
• restrict bookings to one per user
• add User-createdEvents query
• add update event mutation
• add delete event mutation
• add update user mutation

Frontend

• rework project structure
  • refactor request code
  • separte global state
  • extend context
  • separate styling
  • make Event-Components reusable
  • keep state in sync without fetching
  • bonus: convert every component to Hooks API
• store token locally*
• handle token expiration
• access user/event images
• add User menu
• add visior list
• add edit event form
• basic styling
  • Implement SASS
  • create basic variables/mixins
  • Login form
  • Navbar
  • Buttons (different variants)
  • Modal
  • Event Cards
  • Event Details
  • Visitor List
  • Event Form
  • make it responsive
• catch errors from API
• display error messages
• add tooltips
• auto-login after signup

*I am totaly aware that storing the token locally is a security issue. But for sake of simplicity I choose to stick to this solution. Especially as I am not handeling any private Data (except the token itself).

Testing

• install cypress
• create login command
• tests for Auth component (login/signup)
• test for Events:
  • creating
  • booking & canceling
  • editing & deleting
• test for user manipualtion
• check all error-displays

Design

• chose color palette
• finde name
• create generic Logo
• add icons

Future additions

• dynamic pages/routes for events
• move login to modal
• add animations (GSAP)
• add welcome page
• add user pages
• design overhaul