Page 7: Building a web application

Sharing my 3 days of work to build the UI for Hirable.

Stack

• Next.js for full-stack React framework. Using the beta version 13 with React Server Components
• React
• Typescript
• OpenAI API for generative AI assistant
• TailwindCSS for styling
• Vercel for deployment

Day 1:

• Learning about Next.js, and reading beta documentation for Version 13, particularly how /app folder and nested routing works, as well as how to decide which components are server or client rendered.
• Other links I found useful: YT on state management, React documentation for RSC
• Started building. Created a new next.js app using npx create-next-app@latest hirable

Starter UI for create-next-app

Day 2:

• Ran into some linting/autosaving problems. Installed Prettier ESlint plugin and other linting configs. Useful links: https://www.aleksandrhovhannisyan.com/blog/format-code-on-save-vs-code-eslint/, https://nextjs.org/docs/basic-features/eslint
• Built basic UI for landing and the editor dashboard. Realized I have no landing page design. Let’s use AI for it.
• Went to Headlime, which is an AI content-building application.

Screenshare of how I used AI to help design Hirable landing page

• Initially wanted to use basic LESS or SASS, or https://stitches.dev which is a CSS-in-JS library I used at work. Never used Tailwind but heard good things, so chose that instead.
• Started coding. Realized I want to be faster/spending too much time writing boring data-binding and a basic component library. It’s 2023, let’s use AI.
• Learned more about Github CoPilot. Got the 60-day trial. Added the VSCode plugin.
• Tried it out. This is a game-changer. Literally 2x’ed my speed. It can understand my code, recommend common patterns and references my other files, and even guess my types correctly. It knows I am using Tailwind and suggest Tailwind classes for me as well. Here is an example:

Github CoPilot 2x-ing my coding speed

Day 3:

• Built the personal info tab of the editor. This page would contain personal information, bio, education, experiences, skills, and hobbies.
• We will populate this on the read-only document on the right, with a layout similar to a resume. We will use localstorage to persist data for now until we add a session and DB connection.

Figma mock

• Made some iterations on design based on speed. This is what it looks like right now

The next step is to integrate with OpenAI to write the content. See y’all next week!