Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rafal19987/accordion
Accordion Component with Sanity CMS integration
https://github.com/rafal19987/accordion
accordion-component dynamic frontend nextjs sanity tailwindcss typescript vercel
Last synced: 6 days ago
JSON representation
Accordion Component with Sanity CMS integration
- Host: GitHub
- URL: https://github.com/rafal19987/accordion
- Owner: rafal19987
- Created: 2024-10-26T07:52:36.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-11-03T15:50:45.000Z (4 months ago)
- Last Synced: 2024-12-21T23:49:10.690Z (2 months ago)
- Topics: accordion-component, dynamic, frontend, nextjs, sanity, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://accordion-lilac-omega.vercel.app
- Size: 800 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Accordion Component for [Kryptonum Software house](https://kryptonum.eu/pl) Dev Task
#### Live version [here](https://accordion-lilac-omega.vercel.app/)
## How to run the project locally on Windows with npm:
Clone the repository
```bash
git clone https://github.com/rafal19987/accordion.git
```
Navigate to the folder
```bash
cd accordion
```
Install dependencies
```bash
npm install
```
Create .env file in root folder and create there variables from .env.EXAMPLE file
Start the development environment
```bash
npm run dev
```
Go to http://localhost:3000/
## Description:
The task was to recreate an accordion component based on a Figma mockup. Initially, I started creating a project based on a template created by programmer [Bogumił Milewski](https://github.com/milewskibogumil), who created the [Astro-Sanity-Starter](https://github.com/milewskibogumil/astro-sanity-starter) integration based on turborepo and bun. Unfortunately, I encountered a bug on Windows 11 that caused the bun to be changed to npm. The bug is described [here](https://github.com/getcursor/cursor/issues/1007).
A big inspiration was also the [accordion component created by the same developer](https://github.com/kryptonum-dev/kryptonum-eu/blob/main/apps/astro/src/components/ui/Accordion.astro). During the development I found that the code borrowed too much from Bogumił's work, which I didn't feel comfortable with. So I decided to slightly change the implementation of the Sanity integration based on Next.js, also replacing scss with Tailwind, to add some freshness, drawing a lot of inspiration from the naming convention of elements and the schema structure for Sanity components.
In this way, instead of copying a large part of someone else's work, I wanted to demonstrate to everyone my actual skills and mindset of how I would approach the task, rather than working in a fully prepared environment. Mea Culpa
## Techstack:
- [Next.js](https://nextjs.org/)
- [Tailwind](https://tailwindcss.com/)
- [Typescript](https://www.typescriptlang.org/)
#### Tools
- [Eslint](https://eslint.org/)
- [Tailwind Typography Plugin](https://v1.tailwindcss.com/docs/typography-plugin)
- [Sanity CMS](https://www.sanity.io/)
#### Deployment
- [Vercel](https://vercel.com/)
## Functionalities:
- [x] Creating an accordion component
- [x] Button that loads more questions with answers than the initial 10
- [x] Accessibility using the details and summary tags
- [x] Animated indicator informing about opening or closing details
- [x] Animated gradient effect as border for expanded details
- [x] Progressbar informing to what extent we have discovered all the questions with answers
- [x] Connecting full site management via Sanity CMS
- [x] Styling the entire site with Tailwind
- [x] Using Tailwind Typography for content with prose
- [x] Static typing with typescript
- [x] Responsiveness for different screens
- [x] Creating a sitemap and robots file
- [x] Lighthouse score 100% for desktop and mobile
## ScreenShots:
