👦 avilysilva

Building projects the make a difference from the UI to the pixel-perfect code

Motivation

For some time, I was looking for a project in which I could show my potential as a design engineer, working from research, creating the interface as a designer to deployment as a software engineer, however, I also didn't want to create something full of effects or features, I wanted something that was simple, functional, organized and useful.

Highlights

• 📝 Fast loading
• 📝 Partial loading
• 📝 Integration with CMS
• 📝 Responsivity
• 📝 Accessibility (a11y)
• 📝 Automated tests
• 📝 Error monitoring
• 📝 Search engine optimization (SEO)
• 📝 Image BlurHash

Technologies

• 🔥 NextJS - Framework
• 🔥 TailwindCSS - style
• 🔥 Prismic - Content Manager
• 🔥 Vitest - Software Quality
• 🔥 Cypress - Software Quality
• 🔥 Sentry - Error monitoring
• 🔥 Typescript - Typing
• 🔥 Tooling - Eslint, Prettier, Husky

Important technical points

• ⚙️ All featured projects was statically generated to improve detail page
• ⚙️ Projects that are not featured are dynamically generated because they do not have much access as those that are featured
• ⚙️ When you are waiting for a dinamically page, a skeleton is displayed to improve the user experience
• ⚙️ All component that use client resources have been componentized to optimize the usage of server components

Installing

  // First you have to clone the projecto into your wokspace
  git clone https://github.com/avilyre/avilysilva

  // Install all dependencies with pnpm or your favorite package manager
  pnpm install

⚠️ Now you have to setup the environment variables. You can find an example file in the project root

  // That is it, run the project
  pnpm run dev

You can view the project at the address displayed in the terminal

Testing

Cypress was used for testing and it's simple to run it

  // Running application's tests
  pnpm run cypress:test
  // or
  // Running cypress's ui testing
  pnpm run cypress:open

Preview

Developed with 💙 by [email protected]