https://github.com/adeonir/graphcms-link-tree
This is an application similar to LinkTree, builded with Next.js and powered by GraphCMS
https://github.com/adeonir/graphcms-link-tree
graphcms graphql jest nextjs react tailwind-css testing-library typescript
Last synced: 7 months ago
JSON representation
This is an application similar to LinkTree, builded with Next.js and powered by GraphCMS
- Host: GitHub
- URL: https://github.com/adeonir/graphcms-link-tree
- Owner: adeonir
- Created: 2022-02-14T19:31:18.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-15T13:42:37.000Z (almost 4 years ago)
- Last Synced: 2025-02-07T09:11:30.088Z (about 1 year ago)
- Topics: graphcms, graphql, jest, nextjs, react, tailwind-css, testing-library, typescript
- Language: TypeScript
- Homepage: https://graphcms-link-tree.vercel.app/adeonir
- Size: 408 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GraphCMS Link Tree
This is an application similar to [LinkTree](https://linktr.ee/), builded with [Next.js](https://nextjs.org/) and powered by [GraphCMS](https://www.graphcms.com/).
# How to use
1. Create a new GraphCMS project
2. Download manually this repo:
```bash
npx degit adeonir/graphcms-link-tree graphcms-link-tree
```
3. Add .env:
```bash
cp .env.example .env
```
4. Provide values for `GRAPHCMS_AUTH_TOKEN` and `GRAPHCMS_ENDPOINT`
5. Install dependencies:
```bash
yarn
```
6. Run the migrations:
```bash
yarn migrations
```
> At this point, you should see 4 models in the GraphCMS Schema dashboard: Creator, Link, Page and Video
7. On GraphCMS Dashboard, create new content. Each page can have one creator and multiple links or videos
8. Run the server:
```bash
yarn dev
```
9. Open the browser and go to [http://localhost:3000/slug](http://localhost:3000/slug), where slug is the text you provided on the Page model
---
## What's inside
- [NextJS](https://nextjs.org)
- [ReactJS](https://reactjs.org)
- [TypeScript](https://www.typescriptlang.org)
- [Tailwind CSS](https://tailwindcss.com)
- [GraphCMS](https://www.graphcms.com)
- [GraphQL Request](https://github.com/prisma-labs/graphql-request)
- [Jest](https://jestjs.io)
- [React Testing Library](https://testing-library.com)
---
Made with ♥️ by Adeonir Kohl