Skip to content

Aadv1k/frontend-projects

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

front-end monorepo đź—ż

test workflow build workflow

this is the monorepo of aadvik's frontend projects.

Packages 📦 Tooling 🛠️
@frontend-projects/fem-rock-paper-scissors-game react TypeScript vite styledcomponents
@frontend-projects/fem-multi-step-form react TypeScript vite tailwindcss postcss
@frontend-projects/fem-password-generator-app react vite sass
@frontend-projects/fem-fylo-dark-theme-landing-page react materialui styledcomponents webpack
@frontend-projects/uidd-product-info-ui-design-card-day-1575 tailwindcss parcel
@frontend-projects/fem-interactive-card-details-form react styledcomponents webpack
@frontend-projects/fem-single-page-design-portfolio react cssmodules sass webpack
@frontend-projects/uidd-stores-list-card-dark-mode-day-1563 sass jest parcel
@frontend-projects/uidd-product-review-modal-rating-day-1565 jest parcel
@frontend-projects/fem-inbrowser-markdown-editor react cssmodules openprops webpack
@frontend-projects/fem-pricing-component-with-toggle react windicss webpack
@frontend-projects/fem-typemaster-prelaunch-landing-page react openprops webpack
@frontend-projects/fem-expenses-chart-component tailwindcss postcss webpack
@frontend-projects/fem-github-user-search-app tailwindcss postcss Webpack
@frontend-projects/fem-intro-section-with-dropdown-navigation tailwindcss postcss webpack
@frontend-projects/fem-interactive-comments-section sass webpack
@frontend-projects/fem-loopstudios-page sass webpack
@frontend-projects/fem-social-dashboard sass webpack
@frontend-projects/fem-huddle-landing-page sass postcss webpack
@frontend-projects/fem-testemonials-grid sass
@frontend-projects/fem-interactive-pricing-component sass
@frontend-projects/fem-crowdfunding-product-page sass gulp
./packages/frontendmentor/static-projects/ static project (not npm packages) can be copied as-is html css javascript

Install

$ git clone git@github.com:aadv1k/frontend-projects.git
$ npm install # install deps
$ npm run build # run the build command

now you can simply load up the ./site/ in a browser.

Scripts

  • npm run build: copies all the packages to the ./site/ directory and renames them appropriately
  • npm run femfetch: a utility script to fetch challenge files from frontendmentor.io
  • npm run lint: run eslint .
  • npm run lint:fix: run eslint . --fix
  • npm run test:ws: run tests in packages where they are present
  • npm run format: format using prettier

Structure

  • ./packages: Directory with all the primary packages of the project
    • ./packages/frontendmentor/: Front-end challenges from frontendmentor.io
    • ./packages/uidesigndaily/: Random design to code challenges from uidesigndaily
  • ./config: configuration scripts for dev tools - eslint, webpack, prettier
  • ./scripts/: utility shell scripts to organize, clean and fetch files in the project
  • ./site/: The static site for the main dashboard

Architecture

This monorepo is managed using npm workspaces, I chose to use a monorepo for primarily one reason - Organization. I liked the semantics of having everything in one place, the standard config utilities and a single domain are really good to have and manage. Alongside this, under this single monorepo, I can test, my code, and setup a CI pipelines. The site is deployed on netlify via the npm run build command This command makes it so that the ./site folder can be dropped onto any server as a static site.

note: currently there are no inner-deps