feat/vitepress

.github/pull_request_template.md

@@ -6,45 +6,55 @@ Instructions:
 -->
 
 # Title - [A clear and concise description of your changes]
-<!-- 
+
+<!--
 Examples
   docs: Update README documentation
   fix: Fix config screen error
-  feat: Integrate login screen 
+  feat: Integrate login screen
 For more details see `docs/commit-message.md#Documentation`
 -->
 
 <!-- Complete below the issue number, if relevant, that this PR closes -->
+
 Solves #
 
 ## Description
-<!-- 
+
+<!--
 - Briefly explain the purpose of this pull request.
 - What problem does it solve or what functionality does it add?
-- Are there any specific user stories or issues addressed by this PR? 
+- Are there any specific user stories or issues addressed by this PR?
 -->
+
 ...
 
 ## Testing
-<!-- 
+
+<!--
 - Describe the testing procedures you followed to verify your changes.
 - Did you write unit tests? Did you manually test the changes?
  -->
- ...
+
+...
 
 ## Screenshots/Demo (optional)
-<!-- 
+
+<!--
 - Screenshots here
 - Video Demo here
  -->
- ...
+
+...
 
 ## Breaking Changes (optional)
-<!-- 
+
+<!--
 - If your changes introduce any breaking changes to the API or functionality, clearly list them here.
 - Explain the rationale behind these breaking changes and how users should migrate their code.
  -->
- ...
+
+...
 
 ## Checklist
 

.gitignore

@@ -1,5 +1,9 @@
 node_modules
 
+# viteoress cache file
+/docs/.vitepress/cache
+/docs/.vitepress/cache/deps
+
 /.cache
 /build
 .env

README.md

@@ -1,6 +1,9 @@
 # 100Hunters
 
 # Table of contents
+
+- [100Hunters](#100hunters)
+- [Table of contents](#table-of-contents)
 - [Overview](#overview)
 - [Features](#features)
 - [Technologies used](#technologies-used)
@@ -16,6 +19,7 @@
 This project aims to create a Kanban board tailored specifically for managing the job hunt process after completing the 100 Devs program. The Kanban board will provide a visual representation of the job search pipeline, allowing users to track their progress, manage tasks efficiently, and stay organized throughout the job hunt journey.
 
 # Features
+
 - **Customizable Columns:** The Kanban board will consist of customizable columns representing different stages of the job search process, such as "Applied", "Interview Scheduled", "Offer Received", etc. Users can add, remove, or modify columns based on their needs.
 
 - **Task Management:** Users can create tasks/cards within each column to represent job applications, networking opportunities, follow-ups, or any other relevant activities. These cards can include details such as company name, job title, application status, contact information, and deadlines.
@@ -24,18 +28,18 @@ This project aims to create a Kanban board tailored specifically for managing th
 
 - **Deadline Reminders:** The board will provide the option to set deadlines for tasks, with optional reminders to ensure users stay on track and meet important application deadlines.
 
-
 # Technologies used
+
 - **Language:** TypeScript
 - **Framework:** Remix (React.js) with Vite and Express
 - **Frontend libraries:** Tailwind CSS, Storybook
 - **Database:** Turso with libSQL (in memory, and hosted as a service)
-- **Testing:**  Vitest, React Testing Library, and Playwright
+- **Testing:** Vitest, React Testing Library, and Playwright
 
 # Folder structure
 
 ```
-├── app 
+├── app
 │   ├── components
 │   ├── db
 │   └── routes
@@ -50,6 +54,7 @@ This project aims to create a Kanban board tailored specifically for managing th
 ```
 
 # Setup Instructions
+
 1. Clone the repository to your local machine.
 2. Navigate to the project directory.
 3. Install dependencies using npm install.
@@ -59,12 +64,11 @@ This project aims to create a Kanban board tailored specifically for managing th
 7. Sign up or log in to start using the Kanban board for managing your job hunt.
 
 # Contribute
+
 Contributions to the project are welcome! If you'd like to contribute, please follow these guidelines:
 
 [Contributing guide](CONTRIBUTING.md)
 
 # License
-This project is licensed under the MIT License
-
-
 
+This project is licensed under the MIT License

app/components/Column/Column.tsx

@@ -3,7 +3,7 @@ import Card from "~/components/Card/Card";
 export default function Column() {
   return (
     <div
-      className="border border-solid border-1 border-gray-700 rounded-md py-5 px-2"
+      className="border-1 rounded-md border border-solid border-gray-700 px-2 py-5"
       onDragOver={() => console.log("dragging over")}
     >
       <h1>This is a column</h1>

docs/.vitepress/config.js

@@ -0,0 +1,49 @@
+// .vitepress/config.js
+import { defineConfig } from "vitepress";
+
+import { withMermaid } from "vitepress-plugin-mermaid";
+
+export default withMermaid(
+  defineConfig({
+    optimizeDeps: {
+      include: ["dayjs", "mermaid"],
+    },
+
+    //   class: "mermaid my-class", // set additional css classes for parent container
+    // },
+    logo: "/favicon.ico",
+    title: "100Hunters",
+    description: "An awesome docs template built by me",
+    themeConfig: {
+      nav: [
+        { text: "Database", link: "/database" },
+        { text: "Environment variables", link: "/environment-variables" },
+        { text: "Storybook", link: "/storybook" },
+        { text: "Tailwind", link: "/tailwind" },
+        { text: "Testing", link: "/testing" },
+        { text: "Contributing", link: "/contributing" },
+      ],
+      sidebar: [
+        {
+          text: "Guide",
+          items: [
+            { text: "Introduction", link: "/introduction" },
+            { text: "Getting Started", link: "/guide/getting-started" },
+            { text: "Database", link: "/database" },
+            { text: "Environment variables", link: "/environment-variables" },
+            { text: "Storybook", link: "/storybook" },
+            { text: "Tailwind", link: "/tailwind" },
+            { text: "Testing", link: "/testing" },
+          ],
+        },
+      ],
+      socialLinks: [
+        { icon: "github", link: "https://github.com/alcpereira/100hunters" },
+      ],
+    },
+    footer: {
+      message: "Released under the MIT License.",
+      copyright: "Copyright © 2022-present Adocs",
+    },
+  }),
+);

docs/contributing.md

@@ -0,0 +1,15 @@
+# How to contribute
+
+If you want to contribte but
+
+**you are not a member of the project**
+Fork and open a [PR](https://www.atlassian.com/fr/git/tutorials/making-a-pull-request)
+
+**or**
+Create a new branch, add your modifications and open a [PR](https://www.atlassian.com/fr/git/tutorials/making-a-pull-request)
+
+## Commit message format
+
+We have very precise rules over how our Git commit messages must be formatted. This format leads to easier to read commit history.
+
+For more information see [commit-message](commit-message.html)

docs/database.md

@@ -1,18 +1,86 @@
 ## Database
+
 ### Decision
+
 To practice SQL queries, we decided to NOT use an ORM.
 
 Using prepare statements only for saftey reasons, see [here](https://sidorares.github.io/node-mysql2/docs#using-prepared-statements)
 
 ### Schema
+
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="../utils/mermaid/dark.png">
   <img alt="Mermaid database schema" src="../utils/mermaid/light.png">
 </picture>
 
 ### Documentation
+
 Schema should be kept up to date using Mermaid Markdown in `utils/mermaid/schema.mmd`
 
+```mermaid
+---
+title: 100hunters database schema
+---
+erDiagram
+    ACCOUNT {
+        int id PK
+        string email
+        string username
+        string password
+    }
+    ACCOUNT ||--|| BOARD : has
+    BOARD {
+        int id PK
+        int accountId FK
+        string title
+    }
+    BOARD ||--|{ COLUMN : contains
+    COLUMN {
+        int id PK
+        int boardId FK
+        string title
+        int position
+    }
+    COLUMN ||--|{ CARD : contains
+    CARD {
+        int id PK
+        int columnId FK
+        int companyId FK
+        string title
+        string description
+        string note
+        int position
+    }
+    CARD }o--|| COMPANY : links
+    COMPANY {
+        int id PK
+        string name
+        string description
+    }
+    COMPANY ||--o{ CONTACT : contains
+    CONTACT {
+        int id PK
+        int companyId FK
+        string name
+        string email
+        string twitter
+        string linkedin
+        text note
+    }
+    CARD ||--|| TODO : contains
+    TODO {
+        int id PK
+        int cardId FK
+        boolean isDone
+    }
+```
+
+Visit the mermaid documentation page [here](https://mermaid.js.org/intro/)
+
 ### Tools
-`mysql2` https://sidorares.github.io/node-mysql2/docs
-TypeScript + `mysql2` : https://sidorares.github.io/node-mysql2/docs/examples/typescript/row-data/index
+
+`mysql2` :  
+https://sidorares.github.io/node-mysql2/docs
+
+`TypeScript + mysql2` :  
+https://sidorares.github.io/node-mysql2/docs/examples/typescript/row-data/index

docs/environment-variables.md

@@ -1,9 +1,11 @@
 ## Environment variables
 
-### Decision
+## Decision
+
 We are not using `dotenv` or similar packages.
 
-### Tools
+## Tools
+
 - `invariant` package to simply check if the essential variables are set and t
 - `--env-file=.env` as recommended per Node [docs ](https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs)
-- Remember to update `environment.d.ts`
+- Remember to update `environment.d.ts

docs/guide/getting-started.md

@@ -0,0 +1,23 @@
+# Getting Started
+
+## Install the application
+
+We have decided to install the application with pnpm package manager.
+
+You can find here the reason we choose to use pnpm by reading this article from Nhost. Click [here](https://nhost.io/blog/how-we-configured-pnpm-and-turborepo-for-our-monorepo).
+
+## Setup Instructions
+
+1. Clone the [repository](https://github.com/alcpereira/100hunters.git) to your local machine.  
+   `git clone https://github.com/alcpereira/100hunters.git`
+2. Navigate to the project directory.
+3. Install dependencies using pnpm install.  
+   `bash pnpm install`  
+   if your installation get some error messages, you can try the following command  
+   `bash pnpm install --shamefully-hoist`  
+   to try to solve the problem.
+4. Set up the backend server and [database](/database).
+5. Run the frontend application using  
+   ` pnpm start`
+6. Access the application through your web browser.
+7. Sign up or log in to start using the Kanban board for managing your job hunt.

docs/guide/presentation.md

@@ -0,0 +1,5 @@
+# 100Hunters project
+
+Explain what is 100hunters project.
+
+Can you explain it?