Skip to content

TASKS.md

Latest commit

 

History

History
234 lines (168 loc) · 9.43 KB

TASKS.md

File metadata and controls

234 lines (168 loc) · 9.43 KB
Raw

PROJECT MANAGEMENT

This file is a way to organise the developpement process and regroup some useful links and tips that are used throughout the project. Some tools like Notion, Jira or Trello are much more efficient at doing this, but the goal here is not to be precise and have a strict organisation, but to have an overview of the project that is easily accesible while working on it.

Table of Content

Dependencies

Currently used:

  • React 19
  • Next.js 15
  • Typescript 5
  • Tailwind CSS
  • Prettier, ESLint, Husky
  • Next-intl
  • Docker
  • Zod
  • Nodemailer

To add later / when relevant:

  • Axios & Tanstack Query
  • Redux
  • Database (PostgreSQL?, RESTful API, auth, assets storage)
  • Jest (tests unitaires)
  • Shadcn

ROADMAP - Current Tasks

  • Internationalization - Check issue with Next-Intl always using 'en' as default locale (check setup, provider & cookies)
  • Markdown - Update files & formatting, add table of contents (cf. extension)
  • Theme - Dark mode integration
  • Update Tailwind CSS to v4
  • Architecture - Use FSD (Feature-Slided Design) for better clarity & scaling
    • (Optional) Add eslint-plugin-boundaries to enforce architectural rules (example here)
    • (Optional) Refactor files & components names to work with React snippets extension (-> PascalCase)
  • Internationalization (check if both work together, or pick one):
    • Reorganize dictionnaires into different files (separate pages & features)
    • Add i18n-ally extension for VSCode for easier messages setup & preview

Roadmap - Fixes & Updates

Not linked to any roadmap, to do when relevant or if necessary.

  • Upgrade - Tailwind v4
  • Config - Transfer VSCode local config to the projet's .vscode file (extensions & extensions's setup)
  • Component - Change language switcher to a Select component (if theme switcher is onClick)
  • Component - Add a scroll-to-top button
  • Routes - Upon adding new pages, reorganise routes (& reorganize /data & /utils)
  • Internationalization - Add translations for accessibility & common items (links, buttons)
  • Theme - When creating project, check if relevant to use different style files specific to the project's route to override generic style (layout, component, fonts etc.).

Future Roadmap & Ideas

Pages

  • About me: more in-depth and personnal introduction
  • Contact: contact form on its own page
  • Projects: overview of projets available on this website (when multiple projects added), with a tag filter (can select techs, frameworks, deps).

Potential projects

  • Project Manager
  • Interactive Dashboard
  • D&D Character Creator
  • Mini-game
  • Next.js boilerplate repository

Project Task Manager

(This project would replace this file)

Would be similar to Notion and Jira, but with basic features (inspired by Aurora Sharff's demo at Next.js Conf 2024).

Objective: have a better task management interface for this project, allow other people to suggest changes. Later, perhaps allow for other people to create & manage their own projects and tasks.

Skills & tools: form validation, CRUD/services + database, authentication, user permissions, admin dashboard with notifications, drag-n-drop, data fetching optimization (get a lot of data, perhaps images)

Features: visitors can view the project, users can suggest modifications (which will appear on their view after that), admins can edit the project management page, view and compare the suggested changes (similar to versionning tools).

Interactive Dashboard

Dashboard showing statistics about dev languages & tech:

Skills & tools: forms validation, CRUD/services + database, public API fetch (optional), diagrams display (library), specific UI style (ex: neon?), dark mode

Features: Allows the user to answer to a poll, then display results of all users answers, using different types of interactive diagrams (use data from this website only, but can compare to other polls if APIs available)

ROADMAP - Done

Initialisation

  • Install dependencies and create basic project structure
  • Setup Docker for local environment (Vercel doesn't support Docker in production)
  • Import style template and setup first layout and page files

Setup

  • Theme: Choose color scheme, fonts (inspired by template, but personnal color)
  • Setup ESLint, Prettier & Husky pre-commit script
  • Create "work in progress" template
  • Deploy on Vercel with Github

Pages Layout

  • Layout responsive
  • Header: Navigation + burger menu, title, links
  • Footer links and contact
  • Internationalization FR/EN

Homepage

  • Create card component
  • Design & fill in introduction content
  • Fix mobile navigation scroll down issue
  • Finish SEO setup & performance tests

Rework project

Here, we have a very basic version website, not well thought and hastily done. We now need to work on a proper design and think about the content in advance.

Design & planning

  • Update TASKS.md file
  • Wireframe and design with Figma
  • Add credits to designs that helped me create this portfolio (top of this file)
  • Define texts content
  • Change fonts to Google Fonts
  • Rework Tailwind CSS setup to use Tailwind default values and reorganise style
  • Update README.md file

Layout & Homepage

Using our new design, we're going to rework our homepage, making it more enjoyable to see, with its reworked style, organised sections, and a few simple animations.

  • Update Layout

    • Update typography & setup new classes & names
    • Update theme & layout's style
    • Setup full translations for header & footer
    • Footer: replace with categories & responsive grid layout, adapt links style
    • Header: modify title, manage the language icon & update the mobile navigation menu
    • Finalize colors theme & setup styles for links (navigation & external)

  • Dependencies

    • Check Node version with Vercel deployment's warning message (upgrade to Node 22.x ?)
    • Update dependencies (+ check deprecated)
    • UX - Fix mobile navigation overflow-hidden when increasing browser page width or switching from portrait to landscape.
    • Clean up code to prepare for next steps (comment sections and remove unused code)

  • Hero section: LCP -> image priority, must load fast.

    • Setup translations (basic; texts will be updated later)
    • Setup block
    • Section full screen height
    • Button: links to LinkedIn or #contact-section ? Setup generic button style & variants

  • Contact section:

    • Setup translations (basic; texts will be updated later)
    • Use the SectionIntroBlock to create a basic title/description/btn. (We'll create a contact-form later)
    • Buttons: LinkedIn, Github, mailto.

  • Deployement (v0.6)

    • Optimize FCP/LCP
    • Add tailwind-merge and the function to work with clsx
    • Check code, fix bugs, clean up code
    • Deploy & test

  • Skills section:

    • Setup translations
    • Prepare items content in a data object (separate file if can get translation there, or directly in component)
    • Use icon library for cards
    • Develop generic Card component with simple animation on hover (temporary animation)

  • Experience section:

    • Setup translations
    • Prepare items content as data object
    • Setup basic vertical (grid?) layout, check vertical line
    • Use Card component for experiences

  • Deploy full basic homepage

Animation & interaction

Now that our page is looking much better, we're going to add some animations and interaction, to better improve the user experience, and display more interesting skills.

  • Skills section:

    • Card animations: Slide-in from bottom with fade-in while appearing.
    • Delay the animation on desktop so the cards don't appear all at once.
    • Make sure the animation only happens once: the cards stay after appearing.

  • Experience section:

    • Card animations: slide-in from side with fade-in while appearing.
    • Timeline: make the line & circles change color or appear with scroll.

  • Contact section:

    • Choose what tools to use for sending email -> Nodemailer
    • Update the description text
    • Setup form translations
    • Setup the contact form:
      • Create the input & text-area components
      • Add pending state animation (+disable fields) on submit
      • Display confirmation/error message (toast? message to form?)
    • Setup form validation with Zod
    • Setup email sender
    • Send confirmation email when message is received?