Project: Scoop-Sustain

Project version updated for Next.js 13.4.8 [This project will be maintained to remain current with Next.js @latest until otherwise noted.] This is ready to use in its current state project is set up with Jest and React Testing Library for code testing, it has been configured to work with type script. Custom imports have been set up but are currently not working within the testing enviroment. Eslint settings still a WOP refining the configs for Jest & Testing Library as well as Typescript. Uses ESLint to parse to Typescript. Sets specific rules for for testing envrioment (files within the **tests** directory or files with names ending in .spec.js, .test.js, .ts, .jsx, or .tsx). Lots of rule modifications I collected from a few other react projects. Configured Import Resolver to handle custom import settings.

Demo Video

Live Project

Demo Link

Features

Environment

• 📟 Next.js
• 🎓 TypeScript
• ✅ Strict Mode for TypeScript and React 18
• 🚀 Tailwind CSS
• 🔺 Vercel

Libraries & Plugins

• 📁 ShadCN UI Library
• 📌 React Icons
• 🍻 Next.js 3rd Parties - GTM
• 📢 Google AdSense
• ✏️ Linter with ESLint (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
• 🛠 Code Formatter with Prettier
• 🦊 Husky for Git Hooks
• 🚫 Lint-staged for running linters on Git staged files
• 🐒 Clerk
• 💐 Daisy UI
• 🌌 Open AI
• 🔗 LangChain
• 🌲 Pinecone

Features

• 🌈 Neon Shadows

• 🌀 Slower Spin Animation

• 🙈 Scrollbar Hide

• 🌈 Expanded Color Library including Social Media Colors

• 💯 Maximize lighthouse score

• 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO

• 🖱️ One click deployment with Vercel (or manual deployment to any hosting services)

Project State

• 🛠️ Release

To-Do List

Main

• Page Routes for Pricing, Upload File, Upload Repo, Upgrade Account, Account Settings
• Rate Limiting on Document Upload & file sizes
• [ ]

Documentation

• Add comments to all public functions
• Create a CONTRIBUTING guide
• Update the README with installation instructions

Features

• [ ]
• [ ]
• [ ]

Bugs

• Visiting another users document page will not show chat or pdf file but it allows you to hang out on blank page, lets kick the user back to the dashboard
• Session tokens only last 1 hour
• [ ]

Refactoring

• [ ]
• [ ]
• [ ]

Libraries & Plugins to Implement

Documentation

• Table of Contents
• Important files and folders
• Configuration
  • Option 1. Set up the project locally
    • Step 3.5v1. Create the .env file locally and populate in Vercel
    • Step 3.5v2. Download the environment variables from Vercel to your local environment
  • Step 3. Run Next.js locally in development mode
    • Step 3.5v1. Create the .env file locally and populate in Vercel
    • Step 3.5v2. Download the environment variables from Vercel to your local environment
  • Step 4. Deploy to production
  • Testing, Formatting, Linting, and Commits
• Questions and Answers
  • It doesn't work! Where can I get help?
• Next steps

Important files and folders

File(s)	Description
/src/app/lib/util/models	Where Mongo DB Schema Models are stored
/src/app/lib/util/actions	Where Server Actions are stored including: Uploading files to S3, Updating Profile info, and creating Invoices for Tips
/src/app/api/auth/[...nextauth]/route.ts	API Route for user authentication
/

Configuration

Option 1. Set up the project locally

Clone/Fork the repository

Rename.env.example to .env.local and populate the variables with the correct information from the above services. Alternatively, you can populate the env variables in the Vercel Dashboard and use the Vercel CLI to pull the environment variables from your Vercel project.

Step 3.5v1. Create the .env file locally and populate in Vercel

Deploy to your testing enviroment on Vercel

npx vercel

The first build will fail with no env variables. Open your Vercel dashboard and copy the entire .env file and paste it in the first line of the Vercel env variable settings and redeploy the project

npx vercel

Step 3.5v2. Download the environment variables from Vercel to your local environment:

npx vercel env pull

Step 3. Run Next.js locally in development mode

npm install && npm run dev

When you run this development server, the changes you make in your frontend and backend configuration will be applied live using hot reloading.

Your personal website should be up and running on http://localhost:3000!

Step 4. Deploy to production

To deploy your changes to production using git:

git add .
git commit
git push

Alternatively, you can deploy without a git hosting provider using the Vercel CLI:

npx vercel --prod

Testing, Formatting, Linting, and Commits

Run ESLint

npm run lint

Run ESLint with fixes

npm run lint --fix

Check code for formatting inconsistencies with Prettier

prettier --check.

Format code to project standards with Prettier

prettier --write.

Run Test with Jest & React Testing Library

npm jest

Run Jest in Verbose Mode

npm jest --verbose --watch

Run Jest with Coverage

npm jest --coverage

Run Jest in CI Mode

npm jest --ci

Questions and Answers

It doesn't work! Where can I get help?

In case of any issues or questions, you can post:

• Next JS Documentation
• Vercel Documentation
• [GitHub Discussions for Vercel][nextjs-vercel]
• GitHub Discussions for Next.js
• Discord Coummunity for Next.js
• Discord Coummunity for Tailwind CSS

Next steps

• Join our Javascript Discord community to ask questions and get help
• Join the Alchemy Labz Discord server to work with others contributing to this project