Skip to content

Animated dark mode SaaS website with a blockchain theme. Using Astro.js, TailwindCSS, and Framer Motion

License

Notifications You must be signed in to change notification settings

JannickPepe/TribeBlockChain

Repository files navigation

NighteCoding Project Setup Guide

Overview

This guide will walk you through setting up and running this AstroJS project. The project integrates various services including Cloudinary, Neon (PostgreSQL), Drizzle ORM, BetterAuth, and GitHub OAuth for authentication.


Prerequisites

Ensure you have the following installed before proceeding:

  • Node.js (Latest LTS recommended)
  • Git
  • pnpm / npm / yarn (Choose one package manager)
  • PostgreSQL Database (Neon)
  • Cloudinary Account
  • GitHub OAuth App

1. Clone the Repository

git clone https://github.com/JannickPepe/TribeBlockChain.git
cd <project-directory>

2. Install Dependencies

pnpm install  # or npm install / yarn install

3. Environment Variables Setup

Create a .env.local(localhost endpoints) and a .env(deployment endpoints) file in the root directory and configure the following variables.

DATABASE_URL=""
BETTER_AUTH_SECRET=""
BETTER_AUTH_URL=""
GITHUB_CLIENT_ID=""
GITHUB_CLIENT_SECRET=""

PUBLIC_CLOUDINARY_CLOUD_NAME=""
PUBLIC_CLOUDINARY_API_KEY=""
CLOUDINARY_API_SECRET=""

🚨 Important: Do not share your env files publicly.


4. Setup Database (Drizzle ORM + Neon)

Run the following command to apply migrations:

pnpm drizzle push  # or npm run drizzle:push / yarn drizzle push

5. Start the Development Server

pnpm dev  # or npm run dev / yarn dev

The server should now be running at http://localhost:4321/.


6. Deploying to Production (Netlify)

  1. Push your changes to GitHub.
  2. Link your repository to Netlify.
  3. Add your environment variables in Netlify's settings.
  4. Deploy your application.

For GitHub OAuth, ensure your OAuth app is set to:

  • Homepage URL: https://your-production-url.com/
  • Authorization Callback URL: https://your-production-url.com/api/auth/callback/github

7. Additional Commands

  • Format Code: pnpm format
  • Lint Code: pnpm lint
  • Build for Production: pnpm build

8. Troubleshooting

"redirect_uri is not associated with this application" Error

Ensure that your GitHub OAuth App settings match the correct URLs (local & production). If using Netlify, check that environment variables are correctly set.

Database Connection Issues

  • Ensure Neon PostgreSQL credentials are correct.
  • Check that your database URL is formatted correctly.
  • Run drizzle push to apply any missing migrations.

9. Contribution Guidelines

Feel free to contribute by submitting a PR! Follow these steps:

  1. Fork the repository
  2. Create a feature branch
  3. Commit and push changes
  4. Open a Pull Request

10. License

This project is licensed under the MIT License. See the LICENSE file for details.

Happy coding! 🚀

About

Animated dark mode SaaS website with a blockchain theme. Using Astro.js, TailwindCSS, and Framer Motion

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published