React.js, Node.js, MongoDB, Socket.io
- React Ecosystem:
- Project was bootstrapped with create-react-app
- UI-Layer was created with React
- React router was used to implement client-side routing
- State Management is handled with the Context-API (built into React core-library)
- Styled Components were used to create all of the custom CSS
- Communication with the Backend is handled with Axios (REST-API) & Socket.io (Game logic)
- All localized strings and static page content (e.g. privacy policy) is stored in Contentful (cloud-based Headless-CMS) and retrieved via their Content Delivery API
- Node.js & Express.js
- mongoDb is used as the database & mongoose as ORM
- Authentication is implemented with JSON Web Tokens
- Passwords are encrypted with bcrypt
- The client-server communication for the game-logic is implemented with Socket.io
- Uses nodemailer to send out transactional mails via Mailjet SMTP
- Security-packages included to make the application more robust are: helmet, hpp, express-rate-limit & express-mongo-sanitize
- User can register & login into the frontend application
- Password is stored encrypted in DB (!)
- Authentication is handled via JWT-webtokens to secure API-transactions & private routes
- Basic form of Virtual Gaming Currency
- User gets a specific amount of VGC after registration, they can use this amount to play on any open table. Should their balance drop to zero they get the same starting amount again for free.
- App screens: Landing Page, Lobby (choose table etc.), Login Screen / Modal, Registration Screen / Modal, User Dashboard, Game UI
- User can join a table and play poker ⇒ full game-loop + In-game chat implemented, Functional animations to support visual gameplay experience
- Localization for two languages implemented (DE, EN)
Set-up either a local mongoDB instance or create a cloud-hosted instance. Save your db username + passsword and the mongoDb connection-string as you will need it for the next step.
MONGO_URI=<YOUR_MONGODB_URI>
JWT_SECRET=<YOUR_JWT_SECRET>
PORT=<YOUR_SERVER_PORT>
NODE_ENV=development
SMTP_HOST=<YOUR_SMTP_HOST>
SMTP_PORT=<YOUR_SMTP_PORT>
SMTP_USER=<YOUR_SMTP_USER>
SMTP_PW=<YOUR_SMTP_PASSWORD>
Create a free community Contentful-Account and create a new Space. Add two locales (en, de) with "en" being the fallback for the german-locale. Create a Content Delivery API Key and copy your space token and Contentful Delivery API access-token to the clipboard, as you will need it for the next step.
You can use the Contentful CLI to import the space backup from the "contentful"-folder into your own Contentful space. This backup includes all localized key-value pairs and the content of the static pages.
REACT_APP_CONTENTFUL_SPACE_ID=<YOUR_CONTENTFUL_SPACE_ID>
REACT_APP_CONTENTFUL_ACCESS_TOKEN=<YOUR_CONTENTFUL_ACCESS_TOKEN>
REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID=<YOUR_GOOGLE_ANALYTICS_TRACKING_ID>
REACT_APP_SERVER_URI=<YOUR_BACKEND_URI_HOST_PORT>
npm install
cd client
npm install
npm run dev
cd client
npm run build
NODE_ENV=production node server.js