By Sean McLaughlan - Visit SketchCircle
Sketchcircle is designed to support the features specific to art improvement sketchbook communities, which typically have been based on forums. In addition to posting to and starring (favoriting) sketchbooks, users can set goals and view an image only timeline for each sketchbook.
Starring sketchbooks puts them into a separate area at the top of the page, making personally important content easy to find.
Posts on SketchCircle are handled through Markdown and the reacte-mde package.
An example post:
The Markdown editor:
Goals have a name, description, target value, and target date, as well as data points recording values and dates. These goals are publicly viewable on the site. If a goal is reached or failed a message will be displayed saying whether the goal was accomplished or not. Adding new data will automatically be added to the current date on the graph.
The image only timeline feature allows users to see all the images from that particular sketchbook without text or responses from other users.
The front-end of SketchCircle uses JavaScript, React, Redux, and MaterialUI.
SketchCircle uses React to create a smooth user experience. Navigating the site is much quicker than if vanilla JavaScript had been used, for example.
Redux is used to store the site's data on the front-end. While Redux was not strictly necessary for SketchCircle, I chose to use it so that I could learn more about it and spend more time using it.
One advantage of using Redux, though, is that returning to previous sketchbooks or the main page will be instant, not requiring waiting for new data.
import { Button, Container, Paper, Grid, Typography } from '@material-ui/core';MaterialUI offers a library of React components that were used to save time and create a uniform look and feel for the project.
The back-end uses Python, Flask, and PostgreSQL.
The database stores everything from users, to posts, to favorites, goals and goal data points.
Flask is also used on the back-end for saving to and querying the database.
My two main goals with this project were learning more about Redux and also making a project with a few real users in mind. I got to spend more time with Redux on this project than any in the past. I also discussed the features that potential users would want from something like SketchCircle, which is where the goal setting and image only timeline originated.