This is a Next.js based reddit clone, using Google authentication through NextAuth. Webapp talks to NextJS API using Apollo GraphQL, and data is stored in Firestore.

Demo: reddit-clone-tomfa.vercel.app

If you want a different database, you can quite easily replace Firebase completely, as it's isolated to a small part of the backend. See Configuration section below

If you instead want to keep Firestore, you can embrace Firebase to get many perks: get realtime updates, eliminate the need for a backend, lower costs and increase performance by using Firebase Auth and making storage calls from frontend by adding Firestore security rules. This would require a larger rewrite.

• Copy .env to .env.local. We can safely store secrets here without having them commited.

• Set JWT_SECRET to a random long string

1. Create a Firebase project.

2. In Firebase, create and download new private key. You can do this from Project Setting -> Service acccounts. From this file, copy over the following attributes to your .env.local file

   • project_id -> FIREBASE_PROJECT_ID
   • private_key -> FIREBASE_PRIVATE_KEY
   • client_email -> FIREBASE_CLIENT_EMAIL

3. Go to Google Cloud console: Credentials for your project

   Find the existing OAuth2.0 web client (autogenerated), and click the Download icon. Add them to your .env.local file

   • Client ID -> GOOGLE_CLIENT_ID
   • Client secret -> GOOGLE_CLIENT_SECRET

   Then click the Edit icon, and add:

   • Authorised JavaScript origins: http://localhost:3000

   • Authorised redirect URIs: http://localhost:3000/api/auth/callback/google

   Replace "http://localhost:3000" with your domain when deploying the app to new domains.

Note: When running the first time, the app will display errors about disabled services or missing indexes. The errors will link you to the related places in Firebase for enabling these services or creating indexes.

When seeing errors like the one above, click the link to enable database or create indexes.

1. Click the button above to copy and deploy to Vercel.
2. In the guide, populate environment variables from your .env.local.
3. After having set up a Vercel app with a domain, go back to step 3 in the previous section and add new domains to Authorised JavaScript origins and redirect urls.
4. In Vercel, set the domain of the app to NEXTAUTH_URL env var.

yarn start

This will start app at localhost:3000

The Webapp talks to our API via a GraphQL, using Documents and React hooks autogenerated by codegen and gqlg.

To make API changes:

• Update ./graphql/schema.graphql
• Run yarn schema:generate

Typescript errors can then be found with yarn tsc -b, which should notify you of most code that needs an update.

The logo/title "raidit" can be overriden by setting env var NEXT_PUBLIC_TITLE.

These are set in lib/config.ts. Simply update them there.

Everything related to using Firestore as a database is isolated to the following two files.

backend/db/index.ts and backend/db/firebase.ts

If you want to replace the database, you need only reimplement these methods.

If you want to restrict login to users with @example.com domain, specify ALLOWED_SIGNUP_DOMAINS in .env. You can use a comma , separator to specify multiple domains.

By default, all domains are granted access.

You can add Auth0, SMS or email login, by adding NextAuth providers in pages/api/auth/[...nextauth].ts.