Recurse Store

A mock e-commerce platform for Recurse Center participants and alumni.

Technologies

Front-end

• Next.js: React framework for server-side rendering
• Material-UI: user interface component library
• Apollo Client: state management library to manage data with GraphQL

Back-end

• Node.js: JavaScript runtime environment
• Express.js: framework used to create a GraphQL endpoint
• GraphQL: data query and manipulation language
• Apollo Server: GraphQL server
• TypeORM: object relational mapping package to work with PostgreSQL
• PostgreSQL: relational database

Authentication

• NextAuth.js: authentication library used to implement OAuth

Transactions

• Stripe API: payment processing

Installation

Setting Up Your Environment

1. Clone or fork this repository and make sure you have the files locally

$ git clone https://github.com/jp-tran/rc-store.git

2. This project uses yarn to manage dependencies. Install yarn if you do not have it

$ npm i --global yarn

Setting Up the Server

1. Make sure you're in the server directory

2. Install dependencies

$ yarn install

3. Set up PostgreSQL and create a database locally

4. Create a .env file with the following variables

PORT=4000
CORS_ORIGIN=http://localhost:3000
DATABASE_URL=postgresql://<user>:<password>@localhost:5432/<database-name>

5. Compile TypeScript code and run the server

$ yarn watch
$ yarn dev

Setting Up the Client

1. Make sure you're in the client directory

2. Install dependencies

$ yarn install

3. Create an OAuth app in Recurse Center settings. Set the redirect URI to http://localhost:3000/api/auth/callback/recurse. Save the ID and secret for step 5.

4. Create a Stripe account and go to your Stripe dashboard to get your Stripe Publishable Key and Secret Key.

5. Create a .env.local file with the following variables

# OAuth Info
RECURSE_ID=<The ID from your Recurse Center settings>
RECURSE_SECRET=<The secret from your Recurse Center settings>
NEXT_AUTH_CONFIG_SECRET=<A random string used to hash tokens, sign cookies and generate crytographic keys>
NEXTAUTH_URL=http://localhost:3000/

# Stripe keys
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<The publishable key from your Stripe dashboard>
STRIPE_SECRET_KEY=<The secret key from your Stripe dashboard>

# GraphQL API URL
NEXT_PUBLIC_API_URL=http://localhost:4000/

6. Run the client

$ yarn dev

Roadmap

• OAuth 2.0 to sign in with Recurse Center accounts
• Display Recurse Center merch
• Shopping cart and payments with Stripe
• Set up PostgreSQL database and TypeORM
• Integrate client and server with GraphQL
• Deploy front end on Vercel and back end on Heroku
• Unit tests for front end and back end
• Marketplace feature for Recursers to sell/buy/trade