Quave Code Challenge

Want to join Quave as a developer?

Great! Read this document and submit your solution.

We hire full stack developers only, so you must be comfortable with both front-end and back-end development.

Good luck!

Not sure if we have open positions right now? Check our Join repository.

Submission

Getting Started

Create a private github repository from this template and share it with us: @renanccastro @filipenevola @rafaportobraga.

Review

Ready for review? Fill out this form.

You will provide a link to your solution repository in the form and also a cover letter. In the letter you should explain why you're a great fit and what you'll bring to Quave

Feedback

We'll give you feedback based on the position description. Check the timeline section in the job posting for feedback deadlines.

Code Stack and Environment

Introduction

At Quave, we use React and .NET for some clients, projects, and products.

React is a popular JavaScript library for building user interfaces efficiently, while .NET provides a robust and scalable backend platform.

Our stack leverages React for the frontend, providing excellent component-based architecture with reusable UI components, paired with .NET's powerful features including:

• Authentication
• Background Jobs
• Entity Framework Core
• REST APIs
• Email Services
• And more

Required Stack

We want to see your React and Python skills.

Your solution must use:

• Frontend: React 18
• Backend: Python 3 with FastAPI
• Database: PostgreSQL
• Styling: Tailwind CSS
• Python Package Management: Poetry
• Python Code Formatting: Black
• Python Linting: flake8

The solution must:

• Use the same data structure as the provided database schema
• Work with npm i && npm start for the frontend
• Work with Poetry for the backend
• Include clear setup instructions
• Be compatible with the latest LTS version of Node.js and Python 3.8+
• Use Black for code formatting with default settings
• Use flake8 for linting with standard configuration

Scope

Requirements

Build a mini-app for event check-ins. The home page needs:

1. Event selector showing event names from the communities table

   • Default text: "Select an event"

2. List of registered people from the people table showing:

   • Full name (first + last name)
   • Company name
   • Title
   • Check-in date (MM/DD/YYYY, HH:mm or N/A)
   • Check-out date (MM/DD/YYYY, HH:mm or N/A)
   • "Check-in {person name}" button
   • "Check-out {person name}" button (shows 5 seconds after check-in)

3. Event summary showing:

   • Current attendee count
   • Company breakdown of current attendees
   • Number of people not checked in

The page should maintain an up-to-date view of the data, ensuring users see changes promptly.

Implementation Rules

1. Use:

   • Python with FastAPI for the backend API
   • React for frontend views
   • PostgreSQL for data
   • TailwindCSS for styling
   • Poetry for Python dependency management

2. App must:

   • Have clear setup instructions in README
   • Run frontend on port 3000
   • Run backend on port 8000
   • Include proper database schema and migrations
   • Include API documentation
   • Use Black for Python code formatting
   • Use flake8 for Python code linting

AI Tools

You can use AI tools to generate code, but you must:

1. Understand all generated code
2. Explain why it's the best solution
3. Answer any related questions in the interview

Not understanding your code = disqualification.

Note

We won't answer questions about this challenge to ensure fair evaluation.