🚀 RR Legal: Rapid River Software Frontend Developer Test

Getting Started

This project was bootstrapped with Vite using the react-ts template which provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Project Prerequisite

• node: 18.x
• yarn 1.22.x

Getting Started

1. Using git (localhost)

• Clone this repo
• Run yarn
• Run yarn dev

2. Using vercel

• Click the deploy with vercel button below to run your own instance (requires vercel account)

Features

• React and Typscript
• Eslint and Prettier (liniting and formatting)
• Husk and lint-staged (linting and formatting on commit)
• commitlint and conventional-commit (enforce commit message format)
• React Router
• shadcn UI(radix UI) and Tailwindcss(😋)
• react-hook-for and zod (form state and validation)
• vitetest (testing)
• SWR (data fetching)
• [] search filter (client side)
• [] Pagination (client-side)

Process

Specification

•	Build  a Frontend react app using vite
•	Configure eslint, prettier (optional)
•	Two pages
◦	Results page
▪	Users can look for existing articles by author name or title. There will be a single input and a search button
◦	Article creation page
▪	The form will be connected to a free online API. I.e https://jsonplaceholder.typicode.com/
▪	The form needs to have client validation.
▪	The form needs to be submitted.
▪	The form will allow users to enter a snippet of a law article or some other long-form content. The form will also contain the personal information of the attorney who proposed the article. I.e name, contact information
•	React router (or Tanstack alternative)
•	Unit tests should be added (either vitest or jest)(optional)

sketches

Screenshots

Available Scripts

In the project directory, you can run:

yarn prepare

yarn dev

Runs the app in the development mode.
Open http://localhost:5137 to view it in the browser.

yarn preview

yarn build

yarn lint

yarn lint:check

yarn lint:write

yarn format:check

yarn format:write

yarn test

yarn test:watch

yarn test:coverage

Project Dependencies

• React
• React DOM
• React Router
• Commitlint
• Husky
• Lint Staged
• TypeScript
• Shadcn ui we ❤️ shadcn
• ESLint
• Prettier
• TailwindCSS
• Vite
• Class Variance Authority
• clsx
• cmdk
• localforage
• lucide-react
• match-sorter
• react-hook-form
• sort-by
• tailwind-merge
• tailwindcss-animate
• zod
• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh
• vites

Contribution

DO NOT RESIST THE URGE TO IMPROVE THIS PROJECT

kindly check out the for more info

Thank you for your time ❤️