This project is bootstrapped using Next.js, Typescript and TailwindCSS.

To get started, clone this repo using git clone https://github.com/Curious-Ways/marketdesign.git. Next run npm i or npm install to install all required dependencies (you need Node JS installed on your machine to run npm commands. See here to download and install Node JS on your machine).

After the installation is complete:

Run npm run dev to start the development server on http://localhost:3000

• Project folder structure
• Styling
• Analytics
• SEO setup
• Sitemap
• Prettier
• env variables
• Configuring walkthroughs
• Configuring the market sandbox

• Pages directory: Since Next.js's router is file-system based, The folder Pages is a Next-specific directory to place routes or pages. For each route, you will have a separate file, which is named as the route. For example the file about.tsx in the pages directory will create the following route: https://domain.com/about. See docs for more details.

• Public directory: Next.js uses this directory to statically serve files like the robots.txt or the favicon.ico. For more information on how to include these files here: official docs.

• Components directory: Contains React components which can be reused across multiple pages.

• TailwindCSS. A utility-first CSS framework with pre-configured classes to create an API for the projects design system.

We use Fathom for page analytics. Add the Fathom Analytics ID to the next.config.js file as an environmental variable. Use identifier/key FATHOM_ANALYTICS_ID as an env variable.

We setup default seo using the next-seo package. You can add your site name, site title and site url as environmental variables under the next.config.js file. See the documentation on how to add seo bits on a per page basis.

We use the next-sitemap package to generate sitemap for different pages.

Prettier is a code formatter. It removes all original styling and ensures that all outputted code conforms to a consistent style. It'll do things like adding a semicolon to the end of every statement, or make sure your indentation is consistent. The .prettierrc file at the project's root is in charge of customising Prettier and how it works. We recommend that you should not touch this file, to keep this configuration consistent through out the period of this project. VScode also has a Prettier extension, see how to install it here.

Create a .env.local file in your root folder and add your sensitive environmental variables to this file. For less sensitive environmental variables (like site URL and title), add them under the next.config.js file.

NB: Prefixing a env variable with NEXT_PUBLIC_ exposes it to the browser. See Next.js documentation.

The walkthroughs can be configured via the configuration files stored in the data/walkthroughs directory.

Each walkthrough comprises one or more scenarios, where each scenario comprises one or more stages. Each scenario is also associated with a role (seller, buyer or generic), which dictates how the current user's projects are displayed.

Stages are iterated through by the user clicking the "next stage" button, the form "Submit" button, or the "Solve market" button. For the first two the stage number will be incremented by one with each click. When the "Solve market" button is clicked we increment through six stages automatically, where each stage is used to represent an aspect of the market outcome being calculated.

Whenever a stage is incremented a scenario function is called that returns the data for that stage. The function for each scenario can be found at:

data/walkthroughs/<role>/<scenario-number>/index.ts

for example:

data/walkthroughs/buyer/1.1/index.ts

These functions each return an object with the following properties:

• myProjects: The current user's projects, which will be displayed in the details box at the top left of the walkthrough.
• buyerProjects: The projects being bidded for by developers.
• sellerProjects: The projects being offered by landholders.
• sidebarContent: An object that maps stage numbers to the content to be displayed in the sidebar.
• options: An object used to conditionally enable features, generally based on the stage number (e.g. enable the form at stage 3).

To create a new scenario for an existing walkthrough create a scenario function using the existing functions as an example and add that function to the index file for the relevant role (e.g. data/walkthroughs/buyer/index.ts). The scenario can be associated with an existing walkthrough, or an entirely new one. If using a new walkthrough this will show up automatically on the "How it works" index page.

To add more scenarios for the market sandbox drop JSON files into the data/demo folder. These scenarios will appear on the Market Sandbox index page.