NLW - Spacetime WEB

Time capsule designed to help you collect your most memorable moments. This README document provides an overview of the features, used technologies, and functionalities of the application, as well as instructions on how to set it up and use it effectively.

This is a Next.js project bootstrapped with create-next-app.

Features:

• Authentication: User can login with Github, and logout.

• Get memories: The home page displays a list of all user's created memories.

• Get memory details(dynamic route): User can navigate to see/read more about a specific memory - if the memory is public others may see it too.

• Create new memory: User can create a new memory with description, media(either a video or an image), and set the visibility (public or personal)

• Edit Memory: User can edit a existing memory to update their information.

• Delete Memory: User can delete a memory - irreversible.

Technologies Used:

• NextJS
• React
• Typescript
• axios
• jwt-decode
• TailwindCSS - devDependencies: @tailwindcss/forms, prettier-plugin-tailwindcss
• PostCSS
• lucide-react
• js-cookie - devDependencies: @types/js-cookie
• dayjs
• eslint - devDependencies: @rocketseat/eslint-config
• autoprefixer
• GIT

Installation and Setup:

• Clone the repository from [https://github.com/kevinCubas/spacetime-web.git].

Requirements

• Node: 17 or latest version
• NPM: 9 or latest version (NPM is included with Node)
• GIT
• ServerAPP - Read the Docs and install the backend app

GITHUB OAuth token AND .env set up

1. Go to the GitHub Developer Settings page: https://github.com/settings/developers.

2. Click on "New OAuth App" to create a new OAuth App.

3. Fill in the following information for your OAuth App:

• Application Name: Choose a name for your application.
• Homepage URL: http://localhost:3000.
• Authorization callback URL: Enter the callback URL where GitHub will redirect users after authentication. For local development, we are using http://localhost:3000/api/auth/callback

4. Click on "Register Application" to create the OAuth App.

After creating the OAuth App, you will see the "Client ID" and "Client Secret" on the OAuth App page. These credentials will be used to authenticate your application with GitHub.

5. In your project, create a .env file in the root directory if it doesn't already exist.

6. Add the following line to the .env file, replacing <CLIENT_ID> with your actual Client ID obtained from the GitHub OAuth App page:

NEXT_PUBLIC_GITHUB_CLIENT_ID=<CLIENT_ID>

Remember to keep your GitHub Client ID and Client Secret secure and never expose them publicly.

Steps to install and run:

1. Clone the repository

  git clone https://github.com/kevinCubas/spacetime-web.git

2. Change into the project directory:

cd spacetime-web

3. Install dependencies using npm:

  npm install

4. Run the application locally: port 3000

  npm run dev

Contributing

To contribute to this project, please follow these guidelines:

1. Fork the repository
2. Create a new branch: git checkout -b feature/your-feature-name
3. Make your changes and commit them using Conventional Commits
4. Push to the branch: git push origin feature/your-feature-name
5. Submit a pull request

Additional Information:

• This application save the login information in browser cookies.

• Next Server side rendering, and React server components

• Middleware to verify if the user is logged in

• Commits using Conventional Commits.

Contributors:

KevinCubas