About

Frontend project developed by Bluestorm Software to test the candidate abilities and a API doc was available in the test period. How I did it in my free time, my focus was to turn it scalable, clean and multiplatform, this app could be used on smartphones, tablets and computers/laptops :)

Prerequisites

• Login
  • Validate login field restrictions(username and password) and your respective endpoint responses(error and success)
• List medications:
  • Simple query on db
  • List should have pagination system based on limit and page number
  • Added to that, the use should be able to query some word and show the result on screen
  • ** Only the params was controlled by Front End
• Create medication:
  • Form field to send to the backend
  • Validate required field, show errors on form...
  • Work with errors and success on the API

Deploy

• Vercel: https://pharmacy-portal.vercel.app/

How to use

I used pnpm to install and update the packages, so I do recommend that you use it too. Plus to that, Lint Staged is configured to use pnpm:

1. Clone it using SSH method -> git clone [email protected]:reisblucas/frontend-portal.git
2. Install it: pnpm i or npm i or yarn i
3. Run it:
   1. pnpm dev
   2. npm run dev
   3. yarn dev
4. Open the link listed on terminal, probably, port 3000: http://localhost:3000/
5. Allowed user to login:

username: bluestorm-api
password: apipassword123

Technologies/Frameworks:

• TypeScript - Latest(@5.2.2)
• Next.js - Latest(@13.5.4)
• NextAuth - Latest(4.23.2)
• Chakra UI - Design system
• React Hook Form
  • 3rd Party Bind between Chakra UI and React Hook Form
• Tanstack React Query - Cache, Query, Server Side query, revalidating...
• Yup - Validation Schema
• Axios

Code Quality:

• ESLint
• Husky
• Lint Staged
• Prettier

Folder sctructure

• Generally, entities come with your respective files, hooks, contracts, services, dictionaries...
• UI things related to this folder, patterns global components to use in the entire application, Layout component, icons if we use custom icons and in the future could use in the application.
• Infra
  • helpers: global helpers
  • hooks: global hooks
  • libs: forgot to add libs folder*
    • axios
    • chakra
    • nextauth
    • tanstack
• Based on that we have our structure folder

.
└── src/
    ├── ...
    ├── entity/
    │   ├── hooks
    │   ├── contracts
    │   ├── services
    │   ├── dictionaries
    │   ├── helpers
    │   └── components/
    │       ├── indext.ts
    │       └── ComponentName.tsx
    ├── ...
    └── ui/
        ├── icons/
        │   └── ...
        ├── patterns(global components)/
        │   └── ...
        └── Layout/
            ├── Header
            ├── Footer
            └── ...

Roadmap

• Configuration - Next.js, NextAuth, ESLint, Prettier, Husky, Lint Staged, TypeScript, Providers, Infra...
• Define project scope - folder structure to be scalable and based on entity
• NextAuth
  • Signin persistance until JWT expire
• Signin Page (Start coding in fact)
  • Service
  • Controller(hooks)
  • View
  • Refactor and do the Componentization
  • Contracts
  • Add Signin form
  • Validate form - React Hook Form + Yup
• Medications List
  • MVCS...
  • Route fetching without queryParams on route
  • Route fetching with queryParams - Limit, Search and/or Page
  • Pagination helper function
    • Refactor and move to the right place
  • Add Filter
  • Componentization
  • Add Contracts
• Create Medication
  • MVCS...
  • Update Contract
  • Add Form
  • Validate form
  • Add handler to control min date on expired_on input based on issued_on field
• App Head metatag
• Design
  • Layout
    • Header
    • DrawerNavigation
      • Buttons as NavLinks
      • Sign out
    • Footer
  • Minor changes to CSS be presentable
  • Add business image on Home
  • Add pill image on Sign in page
• Fix Head metate receiving more than 1 children on Title - Error is only locally