KXLAA/nartefacts

A Collection Of Colour Palettes Inspired By African Music

nartefacts

nartefacts is a website that curates color palettes extracted from album covers of African musicians. The dominant colors on the covers are extracted by a package called colour-thief.

This is the second version of the webapp. You can view the code for the old version here and a live preview here. You can also check out the figma design here

Version 2 has some significant code improvements:

• The webapp has been rewritten in TypeScript

• The home page is now rendered on the server with a combination of getServerSideProps and the apollo cache improving performance

• New unit tests for the components with the @testing-library/react library & jest library

• End to end tests for the webapp with cypress library

• Using prisma as a database ORM

Apart from code improvements, there are also a number of new features:

• Users can now generate color palette's from images they upload, uploads are handled with aws s3
• Users can save color pallettes they create to local storage

Technologies used

• 💅🏿 Stitches - One of my favorite CSS-in-Js solutions
• 🔯 React - The frontend framework
• ⛑ TypeScript - For my sanity
• 🪣 AWS S3 - To store uploaded images
• ᠀ Mongo DB - Database for storing color palettes
• 🦷 GraphQL & Apollo - GraphQL server for querying color palettes
• 🧊 Prisma - Database ORM
• 📏 ESLint & Prettier — For code formatting and correctness
• 🧪 Jest & React Testing Library - To write unit tests
• 🔬 Cypress - To write end to end tests
• 🐶 Husky — To run scripts before committing
• ♺ Plop — Micro-generator to generate react component files in a consistent manner
• 🚓 Commitlint — A linter to make sure that commits follow a convention
• 🚫 lint-staged — Run ESLint & Prettier against staged Git files
• 👷 CI Workflow — Run tets, Type Check, lint and format on Pull Requests

Development

Clone the repository:

git clone https://github.com/KXLAA/nartefacts.git

Then create a .env file in the root of the project with the following contents:

JWT_SESSION_SECRET=
DATABASE_URL=
S3_UPLOAD_KEY=
S3_UPLOAD_SECRET=
S3_UPLOAD_BUCKET=
S3_UPLOAD_REGION=

Install the dependencies:

yarn

Then run the server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

To Query the server got to http://localhost:3000/graphql.