diff --git a/README.md b/README.md index a8ae01d..59deadf 100644 --- a/README.md +++ b/README.md @@ -1,53 +1,135 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped -with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# yappi frontend -## Getting Started +This is the UI for the yappi project and was bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). -First, run the development server: +### 🚀 Getting Started + +##### First, clone the repository to your local machine: + +```bash +git clone https://github.com/24FSIIT16/dear-dev-frontend.git +``` + +##### Install the Dependencies: + +```bash +npm install +``` + +##### Run the Development Server: ```bash npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +### 🔒 Setup authentication -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and -load Inter, a custom Google Font. +Authentication is done using [Auth.js](https://authjs.dev/) (NextAuth). -## Deploy to Server +Follow the Auth.js getting-started guide for creating an auth secret: [Getting Started](https://authjs.dev/getting-started/installation) -### Make sure to replace your_password_here with your actual password (for db). +At the moment, the project only supports Github and Google authentication. +Follow the Auth.js providers guide for setting up GitHub and Google OAuth providers: -echo "POSTGRES_USER=user_name_here" >> .env -echo "POSTGRES_PASSWORD=your_password_here" >> .env +- [GitHub](https://authjs.dev/getting-started/authentication/oauth) +- [Google](https://authjs.dev/getting-started/authentication/oauth) -### Set File Permissions: Set the file permissions to restrict access: +To setup authentication, you need to create a `.env.local` file in the root directory and add the following environment variables: -chmod 600 .env +```bash +# Auth.js +AUTH_SECRET=your_auth_secret +AUTH_TRUST_HOST=TRUE +AUTH_URL=http://localhost:3000 + +# Providers +AUTH_GITHUB_ID=your_github_id +AUTH_GITHUB_SECRET=your_github_secret +AUTH_GOOGLE_ID=your_google_id +``` -### create file & copy the docker-compose.yml from .github/workflows/docker-compose.yml into home/yappi +To use the authentication in the project, you need to use the application with the yappi backend. This is because of the used Database Adapter [PostgeSQL Adapter](https://authjs.dev/getting-started/adapters/pg). -### run container.. +Have a look at: `auth.ts`file in the project to see how the authentication is implemented. -docker-compose up -d +### 💾 Setup API, Database and Backend -### stop & remove all containers +If the yappi UI is used in conjunction with the yappi backend you need to add the following environment variables to the `.env.local` file: -docker stop $(docker ps -a -q) -docker rm $(docker ps -a -q) +```bash +# yappi DB +DATABASE_HOST=localhost +DATABASE_PORT=5432 +DATABASE_NAME=yappi_db +DATABASE_USER=yappi_db_admin +DATABASE_PASSWORD=your_db_password + +# JWT Secret, use the same in the backend +JWT_SECRET=your_jwt_secret + +# API URL +NEXT_PUBLIC_API_URL=http://localhost:8080 +``` + +If you made changes in the backend regarding databse or ports, you need to adjust the environment variables accordingly. + +### 📊 Setup Github Contribution Graph + +To combine your tracked happiness data with code contributions from github, you need to add the following environment variables to the `.env.local` file: -### remove all images +```bash +NEXT_PUBLIC_GITHUB_TOKEN=your_personal_github_token +``` + +To create a personal acces token, follow the guide: [Creating a personal access token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token) +Minimal scope of the token: `read:user` -docker rmi $(docker images -q) +##### Start the project with docker-compose: + +```bash +docker compose up -d +``` + +**Attention:** You have to change the .env file to .env.local in the `docker-compose.yml` file. +This will build the project and start it in a docker container, that includes the database as well. The project will be running on `http://localhost:3000`. + +If you want to change for example the database name, you can do so in the `docker-compose.yml` file. + +### 🛟 Usefull Docker Commands + +List all running container: + +```bash +docker ps +``` + +Clean and remove docker images / container + +```bash +sudo docker stop $(sudo docker ps -q) true +sudo docker rm $(sudo docker ps -a -q) true +sudo docker image rm $(sudo docker images -q) || true +``` + +View logs of the running container: + +```bash +docker logs -f +``` + +Delete docker volumes: + +```bash +docker volumne prune -f +``` -### remove all volumes +### 📦 Built With -docker volume rm $(docker volume ls -q) +- React +- Next.js +- TypeScript +- Auth.js +- shadcn/ui +- Framer Motion