/dev-directory

A searchable directory of software engineers who are part of the 100Devs agency.

Primary LanguageTypeScript

100Devs Directory

A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integration.

Deployment Instructions

After forking or cloning this repo, you will need to create a GitHub OAuth App to use it. Here are the steps:

  1. Go to https://github.com/settings/developers and create a new OAuth application
  2. Name your application whatever you want.
  3. Set the homepage URL to https://vercel.app for now (we'll change this later).
  4. Set the authorization callback URL to https://vercel.app/api/auth/callback/github for now (we'll change this later).
  5. Click "Register Application."
  6. Once the application is created, copy the "Client ID." This will be your GITHUB_CLIENT_ID.
  7. Generate a new client secret and copy that too. This will be your GITHUB_CLIENT_SECRET.
  8. Generate a random secret here. This will be your NEXTAUTH_SECRET.
  9. Click on this button below to clone and deploy this template to Vercel.

Deploy with Vercel

  1. Once your application is deployed, edit the homepage & callback URLs in your GitHub OAuth App to match your deployment URL.

Alternatively, you can directly deploy it from Vercel and add everything as you go by clicking here. You can also find more documentation there, though I've tried to be as exhaustive as possible and have taken first-time Typescript users in mind.

Installation

After installing dependencies (npm install), run the development server:

npm run dev
or

npm start

The latter command presupposes you have a build already packaged. If not, type in:

npm run build

In order for you to run this on localhost (dev mode), you must add your MongoDB_URI on a local .env config file, as well as this line:

NEXTAUTH_URL=http://localhost:3000/api/auth

Refer to the package.json file to see all the available scripts you can run with git.

NOTE FOR WINDOWS USERS

You must install the following package to compile a build package on a Windows machine:

npm install -g win-node-env

Vercel + MongoDB Integration

https://vercel.com/integrations/mongodbatlas

If you deploy this repo directly from Vercel, a database will be automatically created for you on MongoDB. There will be a database named, "test," and a collection named, "users." You have to manually change this on the user.ts file that's located in lib/api/user.ts. You have to make this change regardless whether you used Vercel or not. Look for the following:

const collection = client.db('test').collection('users');

Just change "test" to whatever your database is called.

Tech Stack