Folder Structure

Organization is the bees knees

Rack & Pinion projects consist of 3 main folders web, studio and story.

If you open the root of your project you will see all of your top level config files, the generated folders and a folder named apps. apps is the folder you will likely be spending the most time in. It contains the 3 most important folders in our Project

web - Web contains all of the contents of our Next.js application and the frontend code for all Rack & Pinion projects. studio - Studio contains all of the contents of our Sanity Studio dashboard storybook - Storybook contains all of the stories for the Rack & Pinion component library

This is the big one. The one where you will spend most of your day to day when creating custom marketing sites. web has all of the regular pieces of a NextJS application, including a public and src directory.

contains images, favicon and indicies directories.

Images and Favicon are fairly self explanitory housing and images that need to be included in the build and the favicons for our project. The indicies directory will be empty in a new project and explored elsewhere in the docs.

Contains the 5 key folders for our built site.

components - Houses all available Rack & Pinion components. From here you will either extend or modify existion Rack & Pinion components OR add new ones within a new directory in this folder
tailwind - Houses the custom css, utilities, plugins and tokens that get used to create or extend utility classes in the Tailwind theme. You will likely have to pop in here to update token values based on the design you're provided.
hooks - Houses all of the custom hooks. You can use this folder to add additional custom hooks to your project.
layouts - Houses all of our top level layouts used by routes in our pages folder
lib - Houses our form functions and utility functions
pages - All of our routes are built from here, similar to a normal NextJS application. These rotes are generated dynamically from our Sanity App and you would generally not need to make changes within' this folder.

We'll explore these folders in more detail in each of the subsequent sections. Generally we like to think carefully about organization as it is critical to empowering the entire team to work on any project. Consistency is key. That said if there is something you think can be improved create an issue.