Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ashishkk22/github-clone-nextjs-graphql

apollo-client graphql-server mongodb nextjs nodejs tailwindcss typescript

Last synced: 2 days ago
JSON representation

Host: GitHub
URL: https://github.com/ashishkk22/github-clone-nextjs-graphql
Owner: ashishkk22
Created: 2023-05-04T08:48:44.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2023-05-11T10:59:09.000Z (over 1 year ago)
Last Synced: 2024-11-10T22:13:34.984Z (2 months ago)
Topics: apollo-client, graphql-server, mongodb, nextjs, nodejs, tailwindcss, typescript
Language: TypeScript
Homepage:
Size: 740 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

Github Clone - Github's Graphql Api, NextJs

### Signup Page
![image](https://github.com/ashishkk22/scientific-calculator/assets/83124264/de94039f-7d19-4151-a7ba-e964e23e6632)

### Home Page
![image](https://github.com/ashishkk22/github-clone-nextjs-graphql/assets/83124264/e6936366-b81c-4c02-af81-3f82d2a3d7f9)

### :space_invader: Tech Stack

Client

Typescript

Next.js

React.js

TailwindCSS

Server

Express

Graphql-request

Database

MongoDB

### :dart: Features

- Github Clone supports basic signup and login features.
- It has a proxy server to hide the Github secret token and handle the requests only from authorized users.
- Users can view their followers, following, and repositories and filter them.
- Users can search for a user with an email or Github ID and view their profile and their followers/following sections.

### 📁 Project Structure

The project structure is organized into two folder such as client and server.

- **`client`**: contains components, generated (graphql typescript types), lib (apolloclient), pages (nextjs page dir), styles, utils and validation (form schema) folders.

![image](https://github.com/ashishkk22/github-clone-nextjs-graphql/assets/83124264/ce7477ed-cb23-4227-83d6-73926d52e163)

- **`server`**: contains controllers, middlewares, models and routers folders.

![image](https://github.com/ashishkk22/github-clone-nextjs-graphql/assets/83124264/875890a5-481f-44b8-bff9-21c34d65e20b)

### :key: Environment Variables

To run this project, you will need to add the following environment variables to your .env file. you can refer .env.example file for the references.

Client
`NEXT_PUBLIC_API_ENDPOINT`

Server
`DB_LINK`
`CRYPTO_KEY`
`CRYPTO_IV`
`CRYPTO_ALGO`
`JWT_COOKIE_EXPIRES`
`JWT_EXPIRE`
`JWT_SECRET`
`CLIENT_LINK`

## :toolbox: Getting Started

### System Requirements

- git v2.13 or greater
- nodejs `14 || 16 || 18`
- npm v8.16.0 or greater

All of these must be available in your `PATH`. To verify things are set up
properly, you can run this:

```shell
git --version
node --version
npm --version
```

### :bangbang: Prerequisites

This project uses Yarn as package manager

```bash
npm install --global yarn
```

### :running: Run Locally

Clone the project

```bash
https://github.com/ashishkk22/github-clone-nextjs-graphql.git
```

Go to the project directory

```bash
cd github-clone-nextjs-graphql
```

Install dependencies and add the required environment variables in the .env

```bash
cd client
```

```bash
yarn install
```

Repeat the same process the install the dependencies in the server.

Start the dev server in the client and server with below command.

```bash
yarn dev
```

## :handshake: Contact

Ashish Kachhadiya - [email protected]