Reactify

A simple starter kit for React

Tech Stack

Overview

This is a simple starter kit for React.

Features

1. Modern UI framework via Material UI
2. Mobile-first design
3. Security via Content Security Policy
4. SEO-friendly via Astro

Screenshots

A screenshot of the homepage

Prerequisites

Before setting up the website, make sure you have:

1. Node.js: a runtime environment for running the website
2. pnpm: a package manager for installing dependencies

Installation

Follow these steps to set up the website:

1. Clone the repository:

git clone https://github.com/madliani/reactify.git
cd reactify

2. Install dependencies:

pnpm install

3. Run tests:

pnpm test

5. Build the website:

pnpm build

Project Structure

• .github/: a directory containing files for GitHub
  • .github/workflows/: a directory containing workflow files for GitHub Actions
    • .github/workflows/check-stable.yaml: a workflow file for checking the stable branch
    • .github/workflows/check-unstable.yaml: a workflow file for checking the unstable branch
• astro/: a directory containing source files of the website
  • astro/blocks/: a directory containing Astro-based blocks of the website
    • astro/blocks/metadata.astro: a file containing metadata, which makes the website more SEO-friendly
  • astro/components/: a directory containing Astro-based components of the website
  • astro/configurations/: a directory containing configuration files for the website
    • astro/configurations/metadata.config.json: a configuration file for the metadata block
  • astro/layouts/: a directory containing Astro-based layouts of the website
  • astro/pages/: a directory containing Astro-based pages of the website
  • astro/styles/: a directory containing CSS-based stylesheets of the website
    • astro/styles/global.css: a file containing global CSS-based stylesheet of the website
  • astro/templates/: a directory containing Astro-based templates for the pages of the website
• public/: a directory containing assets for the website
  • assets/icons/: a directory containing icons for the website
  • assets/images: a directory containing icons for the website
• react/: a directory containing React-based components of the web app
  • react/components/: a directory containing React-based components of the web app
• tests/: a directory containing setup files for tests
  • tests/setup.ts: a main setup file for tests
• types/: a directory containing type declarations for the configuration files
  • types/vitest.ts: a file containing type declarations for the Vitest configuration file
• .env: an file, which contains environment variables (local and ignored by Git)
• .browserslistrc: a Browserslist configuration file
• .gitattributes: a Git attributes file
• .gitignore: a Git ignore file
• .prettierignore: a Prettier ignore file
• .stylelintcache: a file of Stylelint, which contains the results of processed files, so that Stylelint only operates on the changed ones (local and ignored by Git)
• .stylelintignore: a Stylelint ignore file
• AUTHORS.txt: an AUTHORS file
• CHANGELOG.md: a CHANGELOG.md file
• CONTRIBUTING.md: a CONTRIBUTING.md file
• cspell.config.js: a JavaScript-based cSpell configuration file
• eslint.config.js: a JavaScript-based ESLint configuration file
• index.html: an index.html file
• LICENSE.txt: a license file
• package.json: a package.json file
• pnpm-lock.yaml: a pnpm lockfile
• pnpm-workspace.yaml: a pnpm-workspace.yaml file
• prettier.config.js: a JavaScript-based Prettier configuration file
• README.md: a README file
• tsconfig.app.json: a TypeScript configuration file for the web app
• tsconfig.json: a base TypeScript configuration file
• tsconfig.json: a main TypeScript configuration file
• tsconfig.test.json: a TypeScript configuration file for tests
• tsdown.config.js: a JavaScript-based tsdown configuration file
• tsconfig.tsbuildinfo: a file of the TypeScript compiler, which contains incremental compilation information (local and ignored by Git)
• vercel.json: a JSON-based configuration file for Vercel
• vitest.config.js: a JavaScript-based Vitest configuration file

Branches

• stable: a stable branch for production builds
• unstable: an unstable branch for development and testing

Note: If you were expecting to see additional branches here, please see Git Workflow.

Git Workflow

This is my personal project that I'm developing alone and for my own purposes. For that reason, a simplified Git workflow is used here.

The simplified Git workflow contains the following steps:

0. Pull from the remote (optional)
1. Synchronize the unstable branch with the stable branch
2. Make a new branch for a new feature, bugfix, or hotfix from the unstable branch
3. Push branch to the remote
4. Implement the feature, bugfix, or hotfix within the branch
5. Test the feature, bugfix, or hotfix within the branch
6. Synchronize the unstable branch with the stable branch (optional)
7. Synchronize the branch with the unstable branch (optional)
8. Retest the feature, bugfix, or hotfix within the branch (optional)
9. Merge the branch into the unstable branch
10. Merge the unstable branch into the stable branch
11. Make a release within the stable branch
12. Delete the branch
13. Push changes to the remote

Note: The optional steps are needed if you are developing a few features, bugfixes, or hotfixes at the same time.

Notes for developers

1. The project is a React-based single-page application (SPA), but it uses Astro as a bundler, a router, and an alternative for React Helmet. So, formally, the project is an Astro-based website.
2. For compatibility reasons, the project uses Nano Stores state manager, which both works with Astro and React. It allows you to share the state of the web app between the Astro-based and React-based components, and also it's officially recommended by Astro developers.
3. The size of the image for The Open Graph protocol should be 1200x630 pixels.

Contributing

To learn about contributing to the project, see CONTRIBUTING.md.

License

The project is distributed under the Unlicense license, with the exception of certain assets.

Attributions

The project uses the following assets:

1. Reactify logo:

   {
       "name": "React logo",
       "url": "https://icon-icons.com/icon/react-original-logo/146374",
       "license": "Free for commerical use",
       "author": {
           "name": "Julien Monty",
           "url": "https://icon-icons.com/authors/934-julien-monty/"
       },
       "from": { "name": "Icon-Icons.com", "url": "https://icon-icons.com/" }
   }

FAQs

1. Why are some development dependencies necessary?

These dependencies are necessary for other dependencies to work correctly.

Dependency	Purpose
tslib	Dependency for the typescript package