In this article, we'll delve into the world of poker and explore a full-stack poker platform built with the MERN (MongoDB, Express, React, Node.js) stack. Vintage Poker is a platform where users can create an account, play poker on predetermined tables, and enjoy a range of features that make it a unique gaming experience.
Technologies Used
The frontend of the application is built using React, with the UI layer created using Styled Components and React Router for client-side routing. State management is handled through the Context API, while communication with the backend is facilitated by Axios (REST API) and Socket.io (game logic).
The backend is powered by Node.js and Express.js, with MongoDB as the database and Mongoose as the ORM. JSON Web Tokens (JWTs) are used for authentication, and passwords are encrypted using bcrypt.
Features
Some of the key features of Vintage Poker include:
- User registration and login
- Virtual gaming currency (VGC) system, where users receive a starting amount that can be used to play on open tables
- Game loop with in-game chat and functional animations for a immersive experience
- Localization support for two languages: English and German
Design Mock-ups
To get an idea of the design mock-ups for Vintage Poker, you can find the Figma files here.
In-depth Project Documentation
For those interested in more detailed documentation, it can be found here.
Quick Start
If you're eager to set up Vintage Poker on your own machine, follow these steps:
- Set up MongoDB: Either create a local instance or host one on a cloud platform. Save the username, password, and connection string for later use.
- Add environment variables: Create a "local.env" file in the "/server/config" folder with the following entries:
- MONGO_URI=
- JWT_SECRET=
- PORT=
- NODE_ENV=development
- SMTP_HOST=
- SMTP_PORT=
- SMTP_USER=
- SMTP_PW=
- Set up Contentful: Create a free community account and set up a new space with two locales (en, de) and create a Content Delivery API key.
- Add environment variables (client-side): Create a ".env.local" file in the "/client" folder with the following entries:
- REACT_APP_CONTENTFUL_SPACE_ID=
- REACT_APP_CONTENTFUL_ACCESS_TOKEN=
- REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID=
- REACT_APP_SERVER_URI=
- Install server dependencies
- Install client dependencies
- Run both Express and React from the root project directory
- Build for production and test before deployment
With these steps, you'll be able to set up Vintage Poker on your own machine and start playing poker with friends!