Awesome

Latest portfolio of Samuel Yusuf

This project is still under construction! Feel free to set it up yourself though 😉

✨ Stack

• Main
  • Framework: Next.js & TypeScript
  • Styling: SCSS
• Program/Journal/Feed
  • Drag: react-draggable
  • ORM: Prisma
  • Database: Railway
  • Server: tRPC
  • Authentication: next-auth
  • Content: Contentlayer
• Testing
  • Unit Testing: Jest
  • Integration Testing: React Testing Library
  • E2E Testing: Cypress
• Tooling
  • Git Hooks: Husky & lint-staged
  • Formatting: ESLint & Prettier
  • Package Manager: pnpm
• Others
  • PWA: next-pwa
  • Theming: next-themes
  • UI Docs: Storybook

😎 Overview

• components/* - React components for the app
• components/Icons/* - SVG icons as React components
• components/Programs/* - Invididual program components
• cypress/* - Files related to Cypress/E2E testing
• data/* - Static data for various components
• env/* - Environment variable validation
• pages/* - Pages for app (there's only 1 main page)
• pages/_offline.tsx - Offline fallback page for PWA
• pages/api/* - All API related tasks
• posts/* - Markdown files for the content of my blog
• prisma/* - My Prisma schema, which uses a CockroachDB database
• public/* - Static assets including fonts and images
• server/* - The backend, which is a tRPC server
• styles/* - Global SCSS files
• types/* - Global type declarations
• utils/* - Utility functions
• worker/* - Service workers

🔧 Setup

git clone https://github.com/Goggwell/newfolio.git
cd newfolio
npm i -g pnpm # this app requires pnpm
pnpm i
pnpm dev

Also set up your own .env (example provided at .env.example)

🚀 Usage

pnpm dev # development
pnpm build # build app
pnpm build # set process.env.ANALYZE to true to see dependency bundle information
pnpm test # run Jest tests
pnpm cypress # run Cypress
pnpm storybook # run Storybook

👷 To-Do

• Add example env
• [] Add static chatbot as a playful experience
• Finish adding Journal entries (for now, but there may be more in the future)
• Finish adding static content in other Programs
• [] Complete styling for all components
• [] Write unit tests for all components
• [] Write full E2E test
• [] Add all components to Storybook
• [] (Optional) Add to-do list with Jotai/Zustand as Sticky Notes alternative
• [] (Optional) Add MS Paint clone
• [] (Optional) Convert react-draggable to @dnd-kit/core

👤 Author

Samuel Yusuf

• Github: @Goggwell

📜 License

This application is licensed under the Apache-2.0 license.

🎉 Show your support

Give a ⭐️ if you like this project!