https://github.com/johnnygerard/fem-character-counter

Character Counter
https://github.com/johnnygerard/fem-character-counter

figma frontend-mentor nextjs react react-aria tailwind-css vercel

Last synced: 4 months ago
JSON representation

Character Counter

• Host: GitHub
• URL: https://github.com/johnnygerard/fem-character-counter
• Owner: johnnygerard
• License: mit
• Created: 2025-03-02T05:19:03.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-07T05:20:09.000Z (over 1 year ago)
• Last Synced: 2025-03-07T06:20:33.547Z (over 1 year ago)
• Topics: figma, frontend-mentor, nextjs, react, react-aria, tailwind-css, vercel
• Language: TypeScript
• Homepage: https://fem-character-counter-jgerard.vercel.app
• Size: 900 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# Frontend Mentor | Character Counter

This is my solution to

the [Character counter challenge](https://www.frontendmentor.io/challenges/character-counter-znSgeWs_i6)

from [Frontend Mentor](https://www.frontendmentor.io/).

[![project status](https://img.shields.io/badge/status-solution_published-success?style=for-the-badge)](https://www.frontendmentor.io/solutions/character-counter-r9BxIMt4DL)

[![live site](https://img.shields.io/badge/live_site-blue?style=for-the-badge)](https://fem-character-counter-jgerard.vercel.app/)

[![Lighthouse report](https://img.shields.io/badge/lighthouse-F44B21?style=for-the-badge&logo=lighthouse&logoColor=fff)](https://googlechrome.github.io/lighthouse/viewer/?gist=62966adc56eaeea3690d73bfe4877155)

## Tech Stack

### Frontend

- **React Framework**: [Next.js 15](https://nextjs.org/)

- **Headless UI Library**: [React Aria](https://react-spectrum.adobe.com/react-aria/index.html)

- **Style**: [Tailwind CSS 4](https://tailwindcss.com/)

### Backend

- **CDN**: Static assets served from [Vercel Edge Network](https://vercel.com/docs/edge-network/overview).

## Dev Environment & Tools

- System: [Ubuntu](https://ubuntu.com/desktop)

- Editor: [WebStorm](https://www.jetbrains.com/webstorm/)

- Formatter: [Prettier](https://prettier.io/)

- Linter: [ESLint](https://eslint.org/)

- AI assistant: [GitHub Copilot](https://github.com/features/copilot)

## Screenshots

### Home Page (Mobile - Light Mode)

![home page mobile light mode](/doc/screenshot/home-mobile-light.avif)

### Home Page (Desktop - Dark Mode)

![home page desktop dark mode](/doc/screenshot/home-desktop-dark.avif)

## Copyright

© 2025 Johnny Gérard