Workspace

View on GitHub

View quick walkthrough video on Loom

Having worked in the design field for many years, I know firsthand how frustrating it can be to keep track of the various pieces needed for one project, let alone multiple projects. A dedicated "workspace" would be very helpful. I decided to tackle this for my Flatiron School capstone project.

I came up with WORKSPACE, a way to help manage all the various assets related to design projects. It is built using a React frontend and a Ruby on Rails backend. Overall, I feel the app turned out successfully, but also is very much a work in progress. I have a list of stretch goals I want to someday incorporate; but I get the feeling this is how it is with every project...

As a side goal, from the start of my Flatiron life, I wanted to connect each phase project into one big phase 5 project. To be honest, I thought it would make the final project a little easier, but not sure it actually did. But I did find it helpful to stick to my design tool theme when planning out all the phase projects.

Quick overview:

React.js frontend
- Styled-Components for main CSS styling
- Bootstrap 5 for navigation
- Axios and Fetch for third-party API handling
Ruby on Rails backend
- Active Record
- Active Storage for uploading and storing images
- BCrypt for password handling
- Postgresql@14 database

Features:

Custom catalog for each individual user
Create new and manage existing projects
Upload new and manage existing image assets
Toolkit resource area which includes:
- Hex color picker
- Hex color conversion info and schemes
- CSS image styling examples
- Integrated Unsplash stock photo search
- Add search results to personal catalog and projects

User authentication is handled by BCrypt. It's easy to create a new account on the signup page. Signing in takes you to the Profile page, which acts as a sort of dashboard with quick links to related projects and Toolkit features.

Catalog View

The main catalog is a collection of all the user's existing projects and assets. To create a new project or upload a new asset, use the links from the nav bar at the top of the page.

Project View

Individual projects display related information at the top, with included assets below. To update project info, click Update Project, fill out the form, and click submit to see the changes automatically. You can also easily delete the project and it will not delete the related assets from the catalog.

Image Asset View

Individual image assets display related information at the top, followed by links to associated projects. If the asset is not included in a project, it can be added from the dropdown menu of available projects. You can easily update asset data or delete the record, similar to project update and delete.

Toolkit

Toolkit is a resource area. Currently, there are color, image, and photo search components.

Hex Color Resource

The Color section, aka my Flatiron Phase 1 project, includes information on using hexadecimal colors in your design. You can use the color picker to find a hex value, then generate various color schemes to work with. You may then grab the hex or RGB values to use in your CSS.

CSS Image Styling

The Images section, or my Flatiron Phase 2 project, dives into how to use CSS in styling images. There are photo examples of different styles with the CSS code snippets below. Utilizing these are a much easier way to transform images than using Photoshop to manipulate or create a new image for each desired effect. The above examples all use the same image, so only one image had to be uploaded and stored.

Unsplash Photo Search

The last Toolkit feature is a photo search using the Unsplash photo archive API. After you search for an image, you can add a result to your catalog, and then include in a project.

Conclusion

Stretch goals for Workspace include a catalog search and filter, the option to upload more than image files, i.e. PDFs, and also the ability to take notes within the Toolkit features and add the note or code snippet to a project.