CBID2 / deals-for-devs

Black Friday deals for developers built with Next.js 14, Xata, Sentry, and Clerk.

Home Page:https://developer-black-friday-deals.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Deals for Devs

All Contributors

An application to send upcoming and ongoing deals straight to your inbox every month!

Getting Started

To get a development environment running on your local machine:

  1. Clone the repository in a directory of your choice.

  2. Create a .env file (from .env.example) and add all the credentials necessary to run the app.

To get those credentials, please send James (@jamesqquick) a message on Discord!

cp .env.example .env

Install packages

npm install

Database Setup

To get started, you'll need to create a free account with Xata.

Xata runs on PostgreSQL, but to get access to the PostgreSQL layer, youll need to enable this in your workspace settings. Find your workspace settings and toggle to enable Direct Access to PostgreSQL (BETA).

Now, you'll need to create a new database. Give it a name, and make sure to enable the checkbox that says Enable direct access to PostgreSQL.

If this is your first db, you'll be prompted to create an API key and Select a platform. Make sure to copy your API key. You can then skip the platform section.

Open your database settings and copy the PostgreSQL endpoint property. You'll need to replace <YOUR_API_KEY> with a new API key. If you haven't already done so, you can create your API key in your Account Settings which can be found in the dropdown menu on your profile icon in the top right corner of the dashboard. Your endpoint will look like this.

postgresql://l5kbra:<YOUR_API_KEY>@us-east-1.sql.xata.sh/<DB_NAME>:main?sslmode=require

Xata uses branches to create multiple instance of a database. The default branch is main. These onboarding steps will assume you are using this default main branch. Learn more about Xata branching.

Update the DATABASE_URL environment variable in your .env file. Make sure to replace <YOUR_API_KEY> with the API key you just created.

DATABASE_URL=postgresql://l5kbra:<YOUR_API_KEY>@us-east-1.sql.xata.sh/<DB_NAME>:main?sslmode=require

Generate DB Tables Using Prisma

Now, you'll need to push the Prisma schema to your db. In your terminal, run the following command. This will generate the necessary tables in your Xata db.

npx prisma db push

You should be able to verify the tables were created successfully inside of the Xata dashboard.

CleanShot 2024-05-08 at 09 18 14

Connect Project To Xata Using the Xata CLI

In this project, we'll be connecting to our db in two different ways: using Prisma ORM and the Xata client SDK. All standard CRUD (Create, read, update, and delete) db interactions will be run through Prisma. We'll use the Xata client to take advantage of Xata specific features like search and file uploads.

You'll need to generate the Xata configuration and typings in your project. To do this, you'll use the Xata CLI. This should have been installed during the npm install. If you have issues, you can manually install like so:

npm install @xata.io/cli

Log in to your Xata account by running the follwing command. This will pop open a new browser window to handle authentication.

xata auth login

If you run into an issue xata command not found you may have a permissions error that prevented you from installing the xata cli. Either run:

sudo npm install

or install the cli manually

sudo npm install -g @xata.io/cli@latest

Initialize xata in your project directory with the following command.

xata init

Choose your newly created database. Then, choose TypeScript for the Generate code and types from your Xata database option. Lastly, choose the default of src/xata.ts for the output path of the generated code.

Run the development server.

npm run dev
# or
yarn dev
# or
pnpm dev

Tech Stack

Contributing

You are welcome to contribute by opening issues or PRs!

Be sure to check out our Contribution Guide. Also, you can join our project channel on the Learn Build Teach Discord by messaging James (@jamesqquick) on Discord for access.

Important

All PRs should target dev as the base branch.

Contributors

Chris Nowicki
Chris Nowicki

💻
Waseem Medhat
Waseem Medhat

💻
klae32
klae32

💻
Edwin Boon
Edwin Boon

💻
Bryan Fines
Bryan Fines

📖
Ellie
Ellie

💻
Christine Belzie
Christine Belzie

💻 📖 ️️️️♿️

About

Black Friday deals for developers built with Next.js 14, Xata, Sentry, and Clerk.

https://developer-black-friday-deals.vercel.app


Languages

Language:TypeScript 97.3%Language:JavaScript 2.2%Language:CSS 0.5%