-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
95 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,76 +1,26 @@ | ||
# full-stack-test-template | ||
# jobby.dev | ||
|
||
A monorepo template to use for our full-stack test. | ||
An example job posting site. | ||
|
||
## Expectations | ||
## The app | ||
|
||
As the name implies this is meant to be a full-stack test, but no full-stack engineer | ||
focuses equally on frontend and backend. Please complete both ends of the test, but | ||
feel free to lean more into the area you are most passionate about. | ||
The app is a basic prototype of an idea I've been thinking about doing as a personal side project. In its current form you can post and view jobs, sort by job type, and using SSE new jobs are instantly shown when posted (try opening multiple tabs, post a job on one tab, and see it populate on the other). The app is deployed to a Google Cloud VM via a Github action when pushing to the main branch. | ||
|
||
There is no time limit imposed by us or required response time. You can do a little each | ||
day over a weeks time or get it all done in a few hours. It's completely up to you, | ||
your schedule, and what you care to invest in this test. Just know that we don't need | ||
you to go overboard - it's just one part of your overall assessment and we know you have | ||
a life outside of working on this test. | ||
## General Thoughts | ||
|
||
## Process | ||
My goal was to check all of the boxes given for the test while keeping scope tight to deliver something in a timely manner. I also tried to put my own spin on things. I think that spin is: | ||
|
||
1. Start by using this template. You can do this by clicking the "Use this template" button in the top right, then "Create a new reposistory". You should make this new repo private. | ||
2. Read the details about the test below and complete the test to your liking. | ||
3. Invite the code review team to your repository and email us to let us know it's ready. If the list of GitHub users has not already been provided to you, work with your contact here to get that list. | ||
4. We will review your work and schedule a technical interview where you will meet some of our engineers and discuss this test. | ||
- Simplistic design: I like text-first designs and took inspiration from sites like startup.jobs, craigslist, and some personal dev blogs I've seen in the past. | ||
- Truly full stack: I wanted to get something actually working, in that it's a basic functional app deployed and accessible via a domain. | ||
- Entrepreneurial: I like thinking things from first principles. This site is inspired by my own experience looking for and applying for jobs. While it doesn't have a full feature set, the idea is to minimize clutter and filler, keep things simple and obvious, and give a 1:1 job employer/applicant experience (an applicant can easily click new job and see what th employer sees, and the employer sees what the applicant will see when creating a new posting). | ||
|
||
# The Test | ||
## What I left out | ||
|
||
There are two sections to the test: API and UI. | ||
There are READMEs in each workspace, though they are just the default READMEs generated by NestJS & Vite. | ||
You can use them for reference or modify/replace them with anything you want to document. | ||
As mentioned I tried to keep things simple and features to a minimum so I could deliver sometihng polished, so there are definitely things I left out. If I had more time or this was a real project, I would definitely: | ||
|
||
## API | ||
- Add testing | ||
- Add features such as search, job description, and user accounts to keep track of applications/applicants | ||
- Add QOL features such as ability to click on a job to highlight it in some way so user can read through list and keep track of what they want to apply to without having to 'save' job somewhere | ||
- Refine UI, for example making the post new job more compact, test responsiveness more | ||
- Add more of my own twist on the idea of a job site in general. For example, I like the idea of requiring a one sentence description of the job to be written by the poster, as well as a three adjective description of the ideal candidate (Curious, Experienced, Hardworking). Maybe require the same of candidates for their profile and don't allow for cover letters. I've also played around with the idea of 'dollar jobs' in that every posting/application requires a dollar to be paid. This would limit a lot of spam on both sides and give confidence to the process without requiring things like cover letters. | ||
|
||
[Set up a SQLite database with TypeORM](https://docs.nestjs.com/techniques/database) and configure it with the NestJS workspace. Create simple CRUD endpoints for any kind of entity (“users” would be a go-to default but feel free to come up with something more interesting to you, pick something from a hobby or a TV show you like; anything), and also create an [SSE](https://docs.nestjs.com/techniques/server-sent-events) endpoint that sends notifications when an entity is created. Bonus points if your entity has any one-to-one or many-to-one relations. We would expect everything to follow Nest’s and TypeORM’s patterns, shown in their documentation. This includes [controller](https://docs.nestjs.com/controllers)/[provider](https://docs.nestjs.com/providers) separation and [TypeORM repositories & entities](https://docs.nestjs.com/techniques/database#repository-pattern). | ||
|
||
Just for the sake of this test, commit & push your SQLite database as well with a number of records already populated in the database. | ||
|
||
## UI | ||
|
||
Find something that inspires you on [Dribbble](https://dribbble.com/shots/popular/web-design) and use that as a basis for your front end. We’re not expecting anything crazy but we just want to compare what you picked vs what you implemented to see how you implement a design. **The only thing we specifically ask is that you use [MUI](https://mui.com/material-ui/getting-started/) components**, only because that’s what we use for our web apps. Develop a page that loads your API’s entities (e.g. “users”) and displays them as a list along with any of their detailed information. | ||
|
||
Also develop a working frontend implementation of your SSE endpoint so that toast notifications are displayed whenever one of your entities is created. | ||
|
||
**We want to emphasize that we do not expect a full scale application with working navigation, complex animations, etc. You should only develop what you need in order to accomplish the goal we've given. Dribbble designs should be used as a basis/foundation for your app's design, not as a goal in itself.** | ||
|
||
# Prerequisites | ||
|
||
- [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) or [Node.js v20.12.0](https://nodejs.org/en/download) | ||
- [pnpm](https://pnpm.io/installation#using-corepack) _(We recommend installing with Corepack)_ | ||
- (Optional) [nx](https://nx.dev/getting-started/installation) for running workspaces | ||
|
||
# Technologies | ||
|
||
Just like the stack we use in our monorepo, this monorepo uses [**NestJS**](https://docs.nestjs.com/) for the API, and **React** (bundled by [**Vite**](https://vitejs.dev/guide/)) for the front end web app. We use **pnpm** for our package manager, which also manages the workspaces within the monorepo. | ||
|
||
# Getting Started | ||
|
||
After installing the prerequisites, you can use `nvm` to install & path the correct Node version based on the `.nvmrc` in this repository. | ||
|
||
```bash | ||
nvm install | ||
nvm use | ||
``` | ||
|
||
Then, install packages from the monorepo root | ||
|
||
```bash | ||
pnpm i | ||
``` | ||
|
||
You can use `nx`, either from a global install or with `pnpx`, to run workspace scripts from each workspace. There are more details on [their website](https://nx.dev/nx-api/nx) but for some quick examples: | ||
|
||
- `pnpx nx run api:start:dev` is going to `run` a package.json script in the `api` workspace, and the script is `start:dev` | ||
- `pnpx nx run-many -t start:dev -p api web` is going to concurrently run the `start:dev` scripts in both `api` and `web` workspaces | ||
|
||
# Other Scripts | ||
|
||
- `pnpm run start:dev` - Runs both API and web app together, concurrently |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
# full-stack-test-template | ||
|
||
A monorepo template to use for our full-stack test. | ||
|
||
## Expectations | ||
|
||
As the name implies this is meant to be a full-stack test, but no full-stack engineer | ||
focuses equally on frontend and backend. Please complete both ends of the test, but | ||
feel free to lean more into the area you are most passionate about. | ||
|
||
There is no time limit imposed by us or required response time. You can do a little each | ||
day over a weeks time or get it all done in a few hours. It's completely up to you, | ||
your schedule, and what you care to invest in this test. Just know that we don't need | ||
you to go overboard - it's just one part of your overall assessment and we know you have | ||
a life outside of working on this test. | ||
|
||
## Process | ||
|
||
1. Start by using this template. You can do this by clicking the "Use this template" button in the top right, then "Create a new reposistory". You should make this new repo private. | ||
2. Read the details about the test below and complete the test to your liking. | ||
3. Invite the code review team to your repository and email us to let us know it's ready. If the list of GitHub users has not already been provided to you, work with your contact here to get that list. | ||
4. We will review your work and schedule a technical interview where you will meet some of our engineers and discuss this test. | ||
|
||
# The Test | ||
|
||
There are two sections to the test: API and UI. | ||
There are READMEs in each workspace, though they are just the default READMEs generated by NestJS & Vite. | ||
You can use them for reference or modify/replace them with anything you want to document. | ||
|
||
## API | ||
|
||
[Set up a SQLite database with TypeORM](https://docs.nestjs.com/techniques/database) and configure it with the NestJS workspace. Create simple CRUD endpoints for any kind of entity (“users” would be a go-to default but feel free to come up with something more interesting to you, pick something from a hobby or a TV show you like; anything), and also create an [SSE](https://docs.nestjs.com/techniques/server-sent-events) endpoint that sends notifications when an entity is created. Bonus points if your entity has any one-to-one or many-to-one relations. We would expect everything to follow Nest’s and TypeORM’s patterns, shown in their documentation. This includes [controller](https://docs.nestjs.com/controllers)/[provider](https://docs.nestjs.com/providers) separation and [TypeORM repositories & entities](https://docs.nestjs.com/techniques/database#repository-pattern). | ||
|
||
Just for the sake of this test, commit & push your SQLite database as well with a number of records already populated in the database. | ||
|
||
## UI | ||
|
||
Find something that inspires you on [Dribbble](https://dribbble.com/shots/popular/web-design) and use that as a basis for your front end. We’re not expecting anything crazy but we just want to compare what you picked vs what you implemented to see how you implement a design. **The only thing we specifically ask is that you use [MUI](https://mui.com/material-ui/getting-started/) components**, only because that’s what we use for our web apps. Develop a page that loads your API’s entities (e.g. “users”) and displays them as a list along with any of their detailed information. | ||
|
||
Also develop a working frontend implementation of your SSE endpoint so that toast notifications are displayed whenever one of your entities is created. | ||
|
||
**We want to emphasize that we do not expect a full scale application with working navigation, complex animations, etc. You should only develop what you need in order to accomplish the goal we've given. Dribbble designs should be used as a basis/foundation for your app's design, not as a goal in itself.** | ||
|
||
# Prerequisites | ||
|
||
- [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) or [Node.js v20.12.0](https://nodejs.org/en/download) | ||
- [pnpm](https://pnpm.io/installation#using-corepack) _(We recommend installing with Corepack)_ | ||
- (Optional) [nx](https://nx.dev/getting-started/installation) for running workspaces | ||
|
||
# Technologies | ||
|
||
Just like the stack we use in our monorepo, this monorepo uses [**NestJS**](https://docs.nestjs.com/) for the API, and **React** (bundled by [**Vite**](https://vitejs.dev/guide/)) for the front end web app. We use **pnpm** for our package manager, which also manages the workspaces within the monorepo. | ||
|
||
# Getting Started | ||
|
||
After installing the prerequisites, you can use `nvm` to install & path the correct Node version based on the `.nvmrc` in this repository. | ||
|
||
```bash | ||
nvm install | ||
nvm use | ||
``` | ||
|
||
Then, install packages from the monorepo root | ||
|
||
```bash | ||
pnpm i | ||
``` | ||
|
||
You can use `nx`, either from a global install or with `pnpx`, to run workspace scripts from each workspace. There are more details on [their website](https://nx.dev/nx-api/nx) but for some quick examples: | ||
|
||
- `pnpx nx run api:start:dev` is going to `run` a package.json script in the `api` workspace, and the script is `start:dev` | ||
- `pnpx nx run-many -t start:dev -p api web` is going to concurrently run the `start:dev` scripts in both `api` and `web` workspaces | ||
|
||
# Other Scripts | ||
|
||
- `pnpm run start:dev` - Runs both API and web app together, concurrently |