docs(source-code): add docs to build project from source, docker + local build

This commit is contained in:
Amruth Pillai 2022-03-09 14:05:40 +01:00
parent 6c671f2dba
commit ef3b2c5638
No known key found for this signature in database
GPG Key ID: E3C57DF9B80855AD
24 changed files with 385 additions and 172 deletions

View File

@ -1,38 +0,0 @@
---
name: Bug report
about: Create a report to help improve
title: "[BUG] "
labels: bug
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.

View File

@ -1,20 +0,0 @@
---
name: Feature request
about: Suggest an idea for this project
title: "[FEATURE] "
labels: enhancement
assignees: AmruthPillai
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.

View File

@ -5,7 +5,7 @@
[![Docker Pulls](https://img.shields.io/docker/pulls/amruthpillai/reactive-resume?style=flat-square)](https://hub.docker.com/r/amruthpillai/reactive-resume)
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FAmruthPillai%2FReactive-Resume.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FAmruthPillai%2FReactive-Resume?ref=badge_shield)
## [Go to App](https://beta.rxresu.me/)
## [Go to App](https://beta.rxresu.me) | [Docs](https://docs.rxresu.me)
Reactive Resume is a free and open source resume builder thats built to make the mundane tasks of creating, updating and sharing your resume as easy as 1, 2, 3. With this app, you can create multiple resumes, share them with recruiters through a unique link and print as PDF, all for free, no advertisements, without losing the integrity and privacy of your data.
@ -31,58 +31,13 @@ You have complete control over what goes into your resume, how it looks, what co
- Tailor-made Backend and Database, isolated from Google, Amazon etc.
- **Oh, and did I mention that it's free?**
## Docker Setup
## Tutorial
You can pull the prebuilt docker images right off the shelf from either [Docker Hub](https://hub.docker.com/repository/docker/amruthpillai/reactive-resume) or [GitHub Container Registry](https://ghcr.io/amruthpillai/reactive-resume). Keep in mind, you would also need a database for this to work as intended.
```sh
# Server
docker run -p 3100:3100 --env-file .env amruthpillai/reactive-resume:server-latest
# Client
docker run -p 3000:3000 --env-file .env amruthpillai/reactive-resume:client-latest
```
Or, to make your life easier there's a simple `docker-compose.yml` included to help you get set up for success.
```sh
docker compose up
```
The docs include an extensive [Tutorial](https://docs.rxresu.me/tutorial) section which outline the features of Reactive Resume and help you through building your first resume on the app.
## Build from Source
If you don't want to use Docker, I understand. There's an old-school way to build the app too. This project, and these instructions rely heavily on [pnpm](https://pnpm.io/) so you might want to have that installed on your system before you continue.
1. Clone the repository locally, or use GitHub Codespaces or CodeSandbox
```
git clone https://github.com/AmruthPillai/Reactive-Resume.git
cd Reactive-Resume
```
2. Install dependencies using `pnpm`, but feel free to use any other package manager that supports npm workspaces.
```
pnpm install
```
3. Copy the `.env.example` file to `.env` in the project root and fill it with values according to your setup. You can skip the SendGrid variables if you don't want to set up mail right away.
```
cp .env.example .env
```
1. Use Docker Compose to create a PostgreSQL instance and a `reactive_resume` database, or feel free to use your own and modify the variables used in `.env`
```
docker-compose up -d postgres
```
5. Run the project and start building!
```
pnpm dev
```
For extensive information on how to build the app on your local machine, head over to the docs's [Source Code](https://docs.rxresu.me/source-code) section.
## Contributing
@ -110,11 +65,13 @@ Reactive Resume would be nothing without the folks who supported me and kept the
## Infrastructure
- Next.js, frontend
- NestJS, backend
- PostgreSQL, database
- DigitalOcean, infrastructure provider
- Crowdin, translation management platform
- [Next.js](), frontend
- [NestJS](), backend
- [PostgreSQL](), database
- [DigitalOcean](), infrastructure provider
- [Crowdin](), translation management platform
 
<a href="https://www.digitalocean.com/">
<img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="200px" />

View File

@ -1,47 +0,0 @@
---
sidebar_position: 1
---
# Tutorial Intro
Let's discover **Docusaurus in less than 5 minutes**.
## Getting Started
Get started by **creating a new site**.
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
### What you'll need
- [Node.js](https://nodejs.org/en/download/) version 14 or above:
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
## Generate a new site
Generate a new Docusaurus site using the **classic template**.
The classic template will automatically be added to your project after you run the command:
```bash
npm init docusaurus@latest my-website classic
```
You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
The command also installs all necessary dependencies you need to run Docusaurus.
## Start your site
Run the development server:
```bash
cd my-website
npm run start
```
The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

56
docs/docs/index.mdx Normal file
View File

@ -0,0 +1,56 @@
---
sidebar_position: 1
sidebar_label: Introduction
---
import TOCInline from '@theme/TOCInline';
# Reactive Resume
[![Docker Pulls](https://img.shields.io/docker/pulls/amruthpillai/reactive-resume?style=flat-square)](https://hub.docker.com/r/amruthpillai/reactive-resume)
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FAmruthPillai%2FReactive-Resume.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FAmruthPillai%2FReactive-Resume?ref=badge_shield)
## [Go to App](https://beta.rxresu.me) | [Docs](https://docs.rxresu.me)
## Summary
Reactive Resume is a free and open source resume builder that's built to make the mundane tasks of creating, updating and sharing your resume as easy as 1, 2, 3. With this app, you can create multiple resumes, share them with recruiters through a unique link and print as PDF, all for free, no advertisements, without losing the integrity and privacy of your data.
You have complete control over what goes into your resume, how it looks, what colors, what templates, even the layout in which sections placed. Want a dark mode resume? It's as easy as editing 3 values and you're done. You don't need to wait to see your changes either. Everything you type, everything you change, appears immediately on your resume and gets updated in real time.
## Features
- Free, forever
- No Advertising
- No User Tracking
- Sync your data across devices
- Import data from [LinkedIn](https://www.linkedin.com/), [JSON Resume](https://jsonresume.org/)
- Manage multiple resumes with one account
- Open Source (with large community support)
- Send your resume to others with a unique sharable link
- Accessible in multiple languages, [help translate here](https://translate.rxresu.me/)
- Pick any font from [Google Fonts](https://fonts.google.com/) to use on your resume
- Choose from 6 vibrant templates and more coming soon
- Export your resume to JSON or PDF format with just one click
- Create an account using your email, or just Sign in with Google
- Mix and match colors to any degree, even a dark mode resume?
- Add sections, add pages and change layouts the way you want to
- Tailor-made Backend and Database, isolated from Google, Amazon etc.
- **Oh, and did I mention that it's free?**
## Report Issues
Use the [GitHub Issues](https://github.com/AmruthPillai/Reactive-Resume/issues/new/choose) platform to notify me about bugs or new features that you would like to see in Reactive Resume. Please check before creating new issues as there might already be one.
## Donations
Reactive Resume would be nothing without the folks who supported me and kept the project alive in the beginning, and your cotinued support is what keeps me going. If you found Reactive Resume to be useful, helpful or just insightful and appreciate the effort I took to make the project, please consider donating as little or as much as your can.
[☕️ &nbsp; Buy me a coffee](https://buymeacoffee.com/AmruthPillai)
## License
Reactive Resume is packaged and distributed using the [MIT License](https://choosealicense.com/licenses/mit/) which allows for commercial use, distribution, modification and private use provided that all copies of the software contain the same license and copyright.
_By the community, for the community._
A passion project by [Amruth Pillai](https://amruthpillai.com/)

View File

@ -0,0 +1,2 @@
position: 3
label: Source Code

View File

@ -0,0 +1,38 @@
---
sidebar_position: 1
---
# Docker
This is probably the easiest method to build the source code on your machine if you already have Docker and Docker Compose installed. If you don't have Docker on your machine, I'll let you figure that out on your own.
1. Once you have Docker set up, you can pull the source code from GitHub and dive into the repository.
```bash
git clone git@github.com:AmruthPillai/Reactive-Resume.git
cd Reactive-Resume
```
2. Install dependencies using [pnpm](https://pnpm.io/), but feel free to use any other package manager that supports [npm workspaces](https://docs.npmjs.com/cli/v8/using-npm/workspaces).
```bash
pnpm install
```
3. Copy the `.env.example` file to `.env` in the project root and fill it with values according to your setup. To know which environment variables are required, and about what they do, head over [this section](env-vars).
```bash
cp .env.example .env
```
4. Use Docker Compose to create a PostgreSQL instance and a `reactive_resume` database, or feel free to use your own and modify the variables used in `.env`
```bash
docker-compose up -d postgres
```
5. Run the project and start building!
```bash
pnpm dev
```

View File

@ -0,0 +1,154 @@
---
sidebar_position: 3
---
import TOCInline from '@theme/TOCInline';
# Environment Variables
The project source code requires certain envrionment variables to be pre-set in order to work as expected. You can get a copy of what the `.env` file should look like from the `.env.example` file in the root of the project's [source code](https://github.com/AmruthPillai/Reactive-Resume/blob/main/.env.example).
Here, I'll be explaining what each of the environment variables are for, and which ones are actually **required** and which ones aren't.
### Sections
<TOCInline toc={toc} minHeadingLevel="2" maxHeadingLevel="2" />
## App
### `TZ`
**Required**: `no`
**Default Value:** `UTC`
**Description:** Server Timezone
This field is just to indicate the timezone that the server should follow. This is just so that the date time information should be unified and all timestamps should follow the same suit.
### `SECRET_KEY`
**Required**: `yes`
**Description:** Secret Key for Client-Server Communication
The secret key can be a unique key, a randomly generated string that is used for client-server communication. You can use this [random.org](https://www.random.org/strings/?num=10&len=20&digits=on&upperalpha=on&loweralpha=on&unique=on&format=html&rnd=new) configuration to generate a long unique string.
## URLs
### `PUBLIC_URL`
**Required**: `yes`
**Description:** URL through which app is accessible
**Default Value:** `http://localhost:3000`
This URL would be used in features like link sharing functionality and authentication redirection. This points only to the client app, as the server would be running on `PORT 3100` always.
## Database
### `POSTGRES_HOST`
**Required**: `yes`
**Default Value:** `localhost`
**Description:** Hostname for the PostgreSQL Server
### `POSTGRES_PORT`
**Required**: `yes`
**Default Value:** `5432`
**Description:** Port of the PostgreSQL Server
### `POSTGRES_USERNAME`
**Required**: `yes`
**Default Value:** `postgres`
**Description:** Username of the PostgreSQL Server
### `POSTGRES_PASSWORD`
**Required**: `yes`
**Default Value:** `postgres`
**Description:** Password of the PostgreSQL Server
### `POSTGRES_DATABASE`
**Required**: `yes`
**Default Value:** `reactive_resume`
**Description:** Name of the Database in PostgreSQL Server
### `POSTGRES_SSL_CERT`
**Required**: `no`
**Description:** Base64 Encoded String of the SSL CA Certificate
Some production-grade managed databases require the need to pass a CA certificate along with the options. You can encode the contents of the `.crt` file sent to you by your cloud provider in _Base64_ and provide it as a environment variable.
## Authentication
### `JWT_SECRET`
**Required**: `yes`
**Description:** Secret to Sign and Extract JWT Payloads
Similar to the `SECRET_KEY`, this can also be a unique generated string. This is used for email/password authentication, to hash + salt passwords stored in the database so they are unreadable.
### `JWT_EXPIRY_TIME`
**Required**: `yes`
**Default Value:** `604800`
**Description:** How long should the JWT be valid for?
This value, in milliseconds, denotes the validity of the JWT token. A shorter value would make the user have to login more frequently.
## Google
As much as I'd like to keep Google out of the picture, they do provide a few services that are actually useful. Namely, Google OAuth (for Login with Google) and Google Fonts (to list all fonts and use them on a resume).
### `PUBLIC_GOOGLE_CLIENT_ID`
**Required**: `no`
**Description:** Google Client ID for Google Login
This field is only required if the Google Login functionality is important to you.
### `GOOGLE_CLIENT_SECRET`
**Required**: `no`
**Description:** Google Client Secret for Google Login
This field is only required if the Google Login functionality is important to you.
### `GOOGLE_API_KEY`
**Required**: `yes`
**Description:** Google API Key used for fetching Google Fonts
Within the resume builder, there's a section where you can pick any font from the Google Fonts Library. To fetch the names and IDs of these fonts, we depend on the Google Fonts API. It does not cost any payment, or the need to enter credit card information to create or use this API.
You can get your own key here: https://developers.google.com/fonts/docs/developer_api
## SendGrid
The server makes use of SendGrid to send the password reset email to those who have forgotten their password. **This section is completely optional for those who do not require this functionality.**
### `SENDGRID_API_KEY`
**Required**: `no`
**Description:** SendGrid API Key
Does not require any payment or credit card information to obtain an API key.
You can get your own key here: https://docs.sendgrid.com/ui/account-and-settings/api-keys
### `SENDGRID_FORGOT_PASSWORD_TEMPLATE_ID`
**Required**: `no`
**Description:** Dynamic Template ID for Forgot Password
### `SENDGRID_FROM_NAME`
**Required**: `no`
**Description:** Sender's Name
### `SENDGRID_FROM_EMAIL`
**Required**: `no`
**Description:** Sender's Email Address

View File

@ -0,0 +1,14 @@
---
sidebar_position: 3
---
# Source Code
No, I'm not going to be talking about [the 2011 movie](https://www.imdb.com/title/tt0945513/) here.
The source code to Reactive Resume is available on [GitHub](https://github.com/AmruthPillai) for you to poke, prod, pull and publish. It is distributed under the [MIT License](https://choosealicense.com/licenses/mit/) which allows you to do **anything you want** with it, including commercial use.
In this section, I'll be going through the steps on how you can build the project on your local machine (or the cloud). You can choose one of two paths from here:
- [Docker](docker)
- [Local Build](local-build)

View File

@ -0,0 +1,48 @@
---
sidebar_position: 2
---
# Local Build
This might not be the most versatile, but it's quite easy and my recommended way of getting the project set up. This project is heavily dependent on [pnpm](https://pnpm.io) and it's monorepo workspaces feature, so I'd pick that up if I were you.
1. Once you have `pnpm` set up, you can pull the source code from GitHub and dive into the repository.
```bash
git clone git@github.com:AmruthPillai/Reactive-Resume.git
cd Reactive-Resume
```
2. Install dependencies using [pnpm](https://pnpm.io/), and it should take just a few minutes.
```bash
pnpm install
```
3. Copy the `.env.example` file to `.env` in the project root and fill it with values according to your setup. To know which environment variables are required, and about what they do, head over [this section](env-vars).
```bash
cp .env.example .env
```
4. Run the app locally by using the command:
```bash
pnpm dev
```
Now, your **frontend** client should be running on [`http://localhost:3000`](http://localhost:3000), your **backend** server on [`http://localhost:3100`](http://localhost:3100) and this **documentation** on [`http://localhost:3200`](http://localhost:3200).
5. Build the project before deploying by running the command:
```bash
pnpm build
```
6. Finally, start the production servers for all three workspaces by running:
```bash
pnpm start
```
Additionally, you can check the `package.json` for some additional scripts on how to run commands for a specific workspace. For more information on pnpm workspaces, head over to [their documentation](https://pnpm.io/workspaces).

View File

@ -0,0 +1,2 @@
position: 2
label: Tutorial

View File

@ -0,0 +1,5 @@
---
sidebar_position: 4
---
# Playing with the artboard

View File

@ -0,0 +1,5 @@
---
sidebar_position: 1
---
# Creating an account

View File

@ -0,0 +1,5 @@
---
sidebar_position: 2
---
# Create a new resume

View File

@ -0,0 +1,5 @@
---
sidebar_position: 6
---
# Create a custom section

View File

@ -0,0 +1,5 @@
---
sidebar_position: 7
---
# Exporting the resume

View File

@ -0,0 +1,5 @@
---
sidebar_position: 3
---
# Import from external sources

View File

@ -0,0 +1,8 @@
---
sidebar_position: 2
sidebar_label: Tutorial
---
# Tutorial
In this section, we go through the features of Reactive Resume and figure out how to navigate through the user interface.

View File

@ -0,0 +1,5 @@
---
sidebar_position: 5
---
# Filling resume data

View File

@ -62,8 +62,8 @@ const config = {
title: 'Sections',
items: [
{
label: 'Documentation',
to: '/docs/intro',
label: 'Building from Source',
to: '/build-from-source',
},
],
},
@ -83,14 +83,14 @@ const config = {
{
title: 'Support',
items: [
{
label: 'Translate',
href: 'https://translate.rxresu.me',
},
{
label: 'Donate',
href: 'https://buymeacoffee.com/AmruthPillai',
},
{
label: 'Translate',
href: 'https://translate.rxresu.me',
},
],
},
],

View File

@ -2,12 +2,12 @@
"name": "@reactive-resume/docs",
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"start": "docusaurus start --port 3200",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"serve": "docusaurus serve --host 0.0.0.0 --port 3200",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids",
"typecheck": "tsc"
@ -16,6 +16,7 @@
"@algolia/client-search": "^4.9.1",
"@docusaurus/core": "2.0.0-beta.17",
"@docusaurus/preset-classic": "2.0.0-beta.17",
"@docusaurus/theme-classic": "^2.0.0-beta.17",
"@mdx-js/react": "^1.6.22",
"clsx": "^1.1.1",
"prism-react-renderer": "^1.2.1",
@ -24,6 +25,7 @@
},
"devDependencies": {
"@docusaurus/module-type-aliases": "2.0.0-beta.17",
"@docusaurus/types": "^2.0.0-beta.17",
"@tsconfig/docusaurus": "^1.0.4",
"@types/react": ">=16.8.0 <18.0.0",
"typescript": "^4.6.2"

View File

@ -29,6 +29,7 @@
"build": "env-cmd --silent concurrently \"pnpm run build:*\"",
"start:server": "pnpm -F server start:prod",
"start:client": "pnpm -F client start",
"start:docs": "pnpm -F docs serve",
"start": "env-cmd --silent concurrently --kill-others \"pnpm run start:*\""
},
"dependencies": {

View File

@ -172,6 +172,8 @@ importers:
'@docusaurus/core': 2.0.0-beta.17
'@docusaurus/module-type-aliases': 2.0.0-beta.17
'@docusaurus/preset-classic': 2.0.0-beta.17
'@docusaurus/theme-classic': ^2.0.0-beta.17
'@docusaurus/types': ^2.0.0-beta.17
'@mdx-js/react': ^1.6.22
'@tsconfig/docusaurus': ^1.0.4
'@types/react': '>=16.8.0 <18.0.0'
@ -184,6 +186,7 @@ importers:
'@algolia/client-search': 4.12.2
'@docusaurus/core': 2.0.0-beta.17_56ffc67857808b91cf4ce450bd1b66d6
'@docusaurus/preset-classic': 2.0.0-beta.17_fc329e0d23c10edfb2e7c8025a480571
'@docusaurus/theme-classic': 2.0.0-beta.17_56ffc67857808b91cf4ce450bd1b66d6
'@mdx-js/react': 1.6.22_react@17.0.2
clsx: 1.1.1
prism-react-renderer: 1.3.1_react@17.0.2
@ -191,6 +194,7 @@ importers:
react-dom: 17.0.2_react@17.0.2
devDependencies:
'@docusaurus/module-type-aliases': 2.0.0-beta.17_react-dom@17.0.2+react@17.0.2
'@docusaurus/types': 2.0.0-beta.17
'@tsconfig/docusaurus': 1.0.4
'@types/react': 17.0.39
typescript: 4.6.2

View File

@ -38,10 +38,7 @@ export class AuthService {
throw new HttpException('A user with that username and/or email already exists.', HttpStatus.UNAUTHORIZED);
}
throw new HttpException(
'Something went wrong. Please try again later, or raise an issue on GitHub if the problem persists.',
HttpStatus.INTERNAL_SERVER_ERROR
);
throw new HttpException(error, HttpStatus.INTERNAL_SERVER_ERROR);
}
}
@ -124,7 +121,7 @@ export class AuthService {
return user;
} catch (error: any) {
if (error.status !== HttpStatus.NOT_FOUND) {
throw new Error('Something went wrong, please try again later.');
throw new HttpException(error, HttpStatus.BAD_GATEWAY);
}
const UserInfoClient = google.oauth2('v2').userinfo;