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 JavaScript, Python, Flask, React, Redux, CSS, PostgreSQL, SQLAlchemy, Heroku, Docker, and Git/Github.
Feature list, user stories, database schema, and more on project wiki:
https://github.com/amandahinton/chromaculture-magazine/wiki
Project highlights:
Built every layer of the stack: database schema, Python web service, and a rich web client in React and Redux
Created beautiful, responsive user experience with CSS that leveraged strengths in design, product, content, and brand
Implemented and configured GitHub action for continuous deployment of Docker containers to production
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.
