https://github.com/pythonhubdev/mentorship-01
Mentorship.01: A mentorship application for mentoring people, collecting feedback after each session, and providing guidance, extensible to handle future session types.
https://github.com/pythonhubdev/mentorship-01
Last synced: 8 days ago
JSON representation
Mentorship.01: A mentorship application for mentoring people, collecting feedback after each session, and providing guidance, extensible to handle future session types.
- Host: GitHub
- URL: https://github.com/pythonhubdev/mentorship-01
- Owner: pythonhubdev
- Created: 2025-10-15T18:28:04.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-25T12:12:08.000Z (7 months ago)
- Last Synced: 2025-10-25T14:12:29.614Z (7 months ago)
- Language: TypeScript
- Homepage: https://mentorship01.vercel.app
- Size: 156 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Welcome to your new TanStack app!
# Getting Started
To run this application:
```bash
bun install
bun --bun run start
```
# Building For Production
To build this application for production:
```bash
bun --bun run build
```
## Styling
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
## T3Env
- You can use T3Env to add type safety to your environment variables.
- Add Environment variables to the `src/env.mjs` file.
- Use the environment variables in your code.
### Usage
```ts
import {env} from "@/env";
console.log(env.VITE_APP_TITLE);
```
## Routing
This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means
that the routes are managed as files in `src/routes`.
### Adding A Route
To add a new route to your application just add another a new file in the `./src/routes` directory.
TanStack will automatically generate the content of the route file for you.
Now that you have two routes you can use a `Link` component to navigate between them.
### Adding Links
To use SPA (Single Page Application) navigation you will need to import the `Link` component from
`@tanstack/solid-router`.
```tsx
import {Link} from "@tanstack/solid-router";
```
Then anywhere in your JSX you can use it like so:
```tsx
About
```
This will create a link that will navigate to the `/about` route.
More information on the `Link` component can be found in
the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).
### Using A Layout
In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route
will appear in all the routes. The route content will appear in the JSX where you use the `` component.
Here is an example layout that includes a header:
```tsx
import {Outlet, createRootRoute} from '@tanstack/solid-router'
import {TanStackRouterDevtools} from '@tanstack/solid-router-devtools'
import {Link} from "@tanstack/solid-router";
export const Route = createRootRoute({
component: () => (
<>
Home
About
>
),
})
```
The `` component is not required so you can remove it if you don't want it in your layout.
More information on layouts can be found in
the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
## Data Fetching
There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But
you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's
rendered.
For example:
```tsx
const peopleRoute = createRoute({
getParentRoute: () => rootRoute,
path: "/people",
loader: async () => {
const response = await fetch("https://swapi.dev/api/people");
return response.json() as Promise<{
results: {
name: string;
}[];
}>;
},
component: () => {
const data = peopleRoute.useLoaderData();
return (
- {person.name}
{data.results.map((person) => (
))}
);
},
});
```
Loaders simplify your data fetching logic dramatically. Check out more information in
the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).
# Demo files
Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with
the features you've installed.
## Linting & Formatting
This project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:
```bash
bun --bun run lint
bun --bun run format
bun --bun run check
```
# Learn More
You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).