Chromaculture Magazine
Chromaculture is a digital magazine for color lovers. The inspiring collection of stories from around the web about palettes, pigments, and color-related projects will take you to surprising places in the spectrum! Chromaculture blends color theory, science, art history, industry information, and pop culture in a way that is modern, informative, provocative, and playful.
The app allows users to browse articles, to bookmark their favorites to save the articles to their profile page, and to read and add comments.
Built with TypeScript, JavaScript, CSS, Next.js, React, React Native, Expo, Radix UI, Prisma, PostgreSQL (Neon), NextAuth, Vitest, React Testing Library, Jest, Vercel, and Git/GitHub.
Project highlights:
Built every layer of the stack: Prisma/PostgreSQL schema on Neon, Next.js 16 App Router server backend, React 19 client, React Native / Expo mobile app
Created a beautiful, responsive user experience with CSS Modules and a design-token system, leveraging strengths in design, product, content, and brand
Implemented passwordless magic-link authentication (Auth.js/NextAuth) spanning web and mobile, with rate-limiting and per-code lockout protections
Configured continuous deployment on Vercel with Git-integrated production and preview builds that run Prisma migrations automatically, with Vercel Blob image storage and analytics
Splash
The entrance screen highlights the most recent or interesting content.
On mobile, the eye-candy photos are hidden to allow easy access to the articles.
Discover
The main article feed shows an overview of each article in the app, with a photo, title, and brief description.
Clicking the read more button will open a modal with additional details about the article.
Article Modal
The modal shows all of the information related to the article: title, photo, author, source, number of people who have bookmarked it, overview, pull quote, and a link to read the original full article.
When the modal is open, the background does not move, making it easier to scroll the modal with your finger on a phone.
Article Detail + Comments
The article detail shows the same information as the modal, and allows bookmarking, but on a screen with the related comments.
Users can tab between previous and next articles so they can see the full information of each article in fewer clicks than navigating with the image grid.
Logged-in users can read all comments for each article as well as add, edit, and delete their own comments.
User Profile
Each user has a page that displays a preview of any article they have bookmarked. Clicking a bookmark icon again will unsave the article and remove it from their profile page.
