Welcome to Color by Nature: A National Parks Digital Coloring Book!
I created this app with a desire to build something that brought together several things I love: nature, color, visuals, interactivity, and creativity. I love how creativity and technology can come together to create amazing products that bring joy to users, and this was something I really wanted to explore. I also liked that this project pushed me to learn new tools that I hadn't experienced yet, such as working with SVGs, Redux, React Hooks, Auth and additional experience with custom CSS.
Ideally I would also love to use this app to provide fundraising support for the National Parks Foundation. I am constantly in awe of the incredible natural beauty that exists within the national parks, and sincerely hope they will continue to remain protected forever. I would love for each completed/colored-in photo to trigger a small donation to support this cause.
Color by Nature allows a user to browse national parks coloring pages and select images to color however they wish.
A user must be logged in to color, and the login will persist until the user clicks 'Logout'. A logged out or new user can view the Image Gallery without logging in, but if they select an image they will be re-directed to the Login page.
A user can:
- log in/create a new account
- browse national parks coloring pages in the Image Gallery
- select colors from the color palette to apply to their chosen image in the Coloring Page
- save an image to their account (The image saves automatically to their account upon selection, and autosaves as each color is applied.)
- view all of their saved images in a gallery (My Images)
- edit a saved image
- download a saved image directly to their device as a png
- delete a saved image
- React.js
- Redux
- React Hooks
- React Router
- Auth
- Custom CSS
Back End
- Ruby on Rails
- PostgreSQL
- BCrypt
- JWT
The coloring book images used within this app have been borrowed from several sources for demo purposes only. They have been minorly edited and transformed into SVGs to allow for coloring functionality.