alex-streza/appli

Appli is the first open-source, tech job application platform, employee/interviewee focused.

Appli: Streamline tech job applications

Organize your job applications, track your progress, and get hired faster with Appli.

Introduction · Installation · Tech Stack + Features · Credits

Introduction

We're trying to build the best interviewee/job searcher tool out there, powered by great design and open-source.

Appli allows users to easily save their job applications to prevent them from getting lost in the shuffle. Users can track their progress, set reminders, and get hired faster.

What we are using

Lets goooo - Next.js 14, Turborepo, Drizzle ORM, Planetscale, Kinde, Resend, React Email, Shadcn/ui, and Stripe.
All seamlessly integrated with the Appli to accelerate the development.

Directory Structure

Appli is a monorepo managed by Turborepo. The monorepo is split between apps and packages directories.

.
├── apps                         # Its app workspace which contains
│    ├── next.js                 # Nextjs app which is deployed in Vercel
│    └── extension
├── packages                     # are the shared packages that are used by the apps (e.g. `@appli/api`)
├── tooling                      # are the shared configuration that are used by the apps and packages (e.g. `@appli/eslint-config`)
├── LICENSE
└── README.md

Use short lowercase names at least for the top-level files and folders except LICENSE, README.md

Installation

Clone & create this repo locally with the following command:

git clone https://github.com/alex-streza/appli

1. Install dependencies using pnpm:

pnpm install

2. Copy .env.example to .env.local and update the variables.

cp .env.example .env.local

4. Input everything you need for the env.

   1. Create Kinde Account
   2. Create Supabase Account
   3. Create Stripe Account and download Stripe CLI

5. Start the development server from either yarn or turbo:

# At the root of the mono repo
pnpm run dev:web

Stripe

To set up Stripe locally with environment variables:

1. Create a Stripe account.
2. After signing in, go to the dashboard and switch to Test mode.
3. In the dashboard, switch to the API keys section.
4. Reveal your secret key and paste it into your .env.local file.
5. For the webhook key, switch to the Webhooks tab, add an endpoint to reveal the secret key.
6. To get the PRODUCT_ID and PRICE_ID, head over to Stripe's API Docs.
7. From the docs, use the API with your STRIPE_API_KEY to create a product & price object.
8. The response object from the API contains two keys: id and product.
9. Use the id as your PRICE_ID and product as your PRODUCT_ID.
10. You can use the same keys for the STD and PRO variables.

Database

This project uses Postgres database on Supabase. To setup a DB for your local dev:

1. Create a free account and a new Database
2. From the dashboard, create a new project.
3. From Home select Drizzle in Connect / ORMs dropdown
4. Copy the entire list of params to .env.local file. Make sure to change the params under the section "Database (Postgres - Supabase)"
5. run pnpm run db:push

You can also use docker-compose to have a Postgres database locally, instead of relying on Supabase:

1. Enter DATABASE_URL value in .env.local.
2. run docker-compose --env-file .env.local up to start the DB.
3. run pnpm run db:push.

Roadmap

• Initial setup
• Implement UI components according to design
• trpc-openapi backend endpoints
• User authentication
• Chrome extension to save applications
• Application performance charts
• AI to predict application success
• AI to improve resume

Tech Stack + Features

Frameworks

• Next.js – React framework for building performant apps with the best developer experience
• Kinde – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
• Drizzle ORM – TypeScript ORM that feels like SPA with SSR

Platforms

• Vercel – Easily preview & deploy changes with git
• Supabase – A cutting-edge database platform for seamless, scalable data management
• Stripe - Payments

UI

• Tailwind CSS – Utility-first CSS framework for rapid UI development
• Shadcn/ui – Re-usable components built using Radix UI and Tailwind CSS
• Framer Motion – Motion library for React to animate components with ease
• Phosphor – a flexible icon family for interfaces, diagrams, presentations — whatever, really.
• next/font – Optimize custom fonts and remove external network requests for improved performance
• ImageResponse – Generate dynamic Open Graph images at the edge

Contributing

We ❤️ our contributors! Here's how you can contribute:

• Open an issue if you believe you've encountered a bug.
• Make a pull request to add new features/make quality-of-life improvements/fix bugs.

## Repo Activity

Credits

Big thanks to @codehagen for starting the open-source/X movement in building awesome software, if you ever need a financial/budgeting platform, check out Badget.

appli's Issues

feat: Endpoint for fetching applications

Describe the feature you'd like to request

TRPC endpoint that returns a list of authenticated user applications to be shown in the dashboard view, we can return the entire list initially, no need for pagination as of now.

Describe the solution you'd like to see

It should return all the data that's showcased in Figma.

Additional information

No response

feat: Base components according to Figma

Describe the feature you'd like to request

Implement base components from Figma Design System

Describe the solution you'd like to see

Use shadcn components

pnpm ui:add component

• button
• input
• select
• dropdown-menu
• toggle
• toggle-group
• card
• dialog

Additional information

No response

Fetch job applications from DB

• trpc endpoint that returns applications grouped by status
• show status badges and counts for each DESIGN
• allow sorting & filtering client side (filter through cached list on frontend instead of backend)

Setup kinde webhook to save user id & data to DB

Kinde Webhooks Docs

Update application status

• trpc endpoint to update application status
• call endpoint in application status dropdown

feat: Endpoint to return authenticated user API key

Describe the feature you'd like to request

Create a TRPC endpoint that returns user API key.

Describe the solution you'd like to see

You should also be able to copy the API key to clipboard using the dropdown menu option.

Additional information

No response

feat: Implement custom auth pages

Describe the feature you'd like to request

Given the design we'd prefer to use custom auth page for register and login.

Describe the solution you'd like to see

The UI is implemented but couldn't make Kinde work with login/register functions.

Additional information

No response