https://github.com/jak-weston/skilltree-website
Landing page for SkillTree: platform that gamifies workout tracking through an interactive skill tree system. Built with TypeScript and modern React practices.
https://github.com/jak-weston/skilltree-website
css-modules fitness-app github-pages jest-testing progress-tracking react responsive-design skill-tree typescript user-authentication web-application web-vitals
Last synced: 7 months ago
JSON representation
Landing page for SkillTree: platform that gamifies workout tracking through an interactive skill tree system. Built with TypeScript and modern React practices.
- Host: GitHub
- URL: https://github.com/jak-weston/skilltree-website
- Owner: jak-weston
- Created: 2024-12-25T11:07:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-02T21:25:16.000Z (7 months ago)
- Last Synced: 2025-07-02T22:29:25.503Z (7 months ago)
- Topics: css-modules, fitness-app, github-pages, jest-testing, progress-tracking, react, responsive-design, skill-tree, typescript, user-authentication, web-application, web-vitals
- Language: TypeScript
- Homepage: https://www.skilltreefitness.com/
- Size: 5.94 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Skilltree Landing Page
Welcome to the Skilltree landing page site! This project is built with NextJS 15, React 19, TailwindCSS v4, and ShadCN UI for themeing and components.
## Getting Started
First, run the development server. Note! This a `pnpm` project. It makes everything a bit faster when downloading packages, and it's a bit smoother all around. To run:
```bash
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Layout
### Content
All content for pre-built pages are set in `content` folder. Doing so allows us to really quickly develop the site around a schema, building all components at once. This also has the _massive_ benefit of being able to easily change the JSON schema to automatically rebuild the website.
As a result, if we want to add new features to the site for example, all we have to do is add new features to the JSON `content/home/copy.ts` file, and the features section will re-build accordingly.
### Components
Components are small pieces that are often reused. We're using ShadCN UI which builds on Radix primitives. Essentially that just means they're high-quality and accessible. They're stored in `components/ui`, and what you see is what you get. Edit the components there and the UI will update.
Themes are set in the `src/app/globals.css` file. It's pretty beautiful because we can add themes at any time and the UI will look great, assuming you use tailwind colors accordingly throughout the UI. For example, you should do `bg-background` instead of something like `bg-white`. That way, the background will automatically update throughout when we change the theme. For more examples, explore the ShadCN UI components located in `components/ui`
### Sections
Sections are a collection of components. Usually they also include content. They're located in `src/sections`.
### Pages
Pages are built of sections! Ezpz.
## Building & Deploying
Right now, there's no Husky pre-commits or anything. Run `pnpm build` before pushing to see if there are any lint errors or whatever. The `main` branch is the live environment, so beware!