.studio

Access a repository of resources of all types to improve
the visual representation of your projects.

• High Level
• Project Overview
• .studio
• Why?
• TODO
• Contributing to the Project
  • Bot Stack
  • Getting Started

The Design Compendium is a resource for graphic designers and developers. When completed, this will present a simple frontend where users can select a tag and be served resources centered around that tag in the realms of design and code.

Back to Contents

The Design Compendium consists of three parts:

1. .compendium: the database containing the resource documents
2. .accumulator: the method by which CRUD operations are run on .compendium
3. .studio: the frontend to display tags and resources

The GraphQL API is built into the Next.js app, using the routing system. Right now, the front end and API is intertwined. Part of the roadmap includes decoupling the two, so any database may be used, and a REST API may be substituted if preferred.

For details on the frontend and API, see [.studio][studio].

Back to Contents

This is .studio, the frontend gallery for The Design Compendium. It will be designed to interface with .compendium through a GraphQL endpoint set to read-only: GET is its sole purpose. CRUD operations will be handled via .accumulator; see that repository for more details.

.studio is currently in development and not yet active. The domain is up and running, though all that is displayed at the moment is Next.js boilerplate. The GraphQL endpoint is active though currently not connected to .compendium. typeDefs are written for the schema; the resolvers still need to be written.

Back to Contents

Why the fuck am I doing this? I needed something to motivate me to actually learn frontend development. Also, I got tired of running through lists of resources and finding them poorly vetted. Some of the READMEs out there, while fairly comprehensive, are incredibly outdated.

Why the fuck is this thing designed this way? I settled on this project design as a way to play with and understand relationships between different parts. This isn't quite a microservices-oriented system, but it also isn't a self-composed project. In addition to the parts that move data around are the layers of interaction above the app, those conversations I hope will take place around resource submissions and discussions.

Back to Contents

• add MongoDB connection
• write GraphQL resolvers to retrieve data
• write algorithm to display resources by tag
• make the frontend pretty

back to Contents

With regard to the general development of what currently exists here:

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

back to Contents