Skip to content

Commit ddf55b5

Browse files
xinnksxinnks
committed
chore: Add app-turso-nextjs-starter
2 parents 70d8e7a + 0de768f commit ddf55b5

30 files changed

+860
-0
lines changed

‎app-turso-nextjs-starter/.env.example

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
NEXT_TURSO_DB_URL=
2+
NEXT_TURSO_DB_AUTH_TOKEN=

‎app-turso-nextjs-starter/.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["next/core-web-vitals", "prettier"]
3+
}

‎app-turso-nextjs-starter/.gitignore

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env*.local
29+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts

‎app-turso-nextjs-starter/.prettierignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.next
2+
.vercel
3+
next-env.d.ts
4+
node_modules
5+
package-lock.json
6+
public

‎app-turso-nextjs-starter/.prettierrc

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"endOfLine": "lf",
3+
"printWidth": 80,
4+
"tabWidth": 2,
5+
"trailingComma": "es5",
6+
"singleQuote": true
7+
}

‎app-turso-nextjs-starter/.vscode/settings.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"editor.formatOnPaste": true,
3+
"editor.formatOnSave": true,
4+
"editor.defaultFormatter": "esbenp.prettier-vscode",
5+
"editor.codeActionsOnSave": {
6+
"source.fixAll.eslint": true,
7+
"source.fixAll.format": true
8+
}
9+
}

‎app-turso-nextjs-starter/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 ChiselStrike Inc.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎app-turso-nextjs-starter/README.md

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
# Turso Nextjs Starter
2+
3+
This is a [Next.js] starter template that uses [Turso] to store data and
4+
[Tailwindcss] for styling.
5+
6+
## Getting Started
7+
8+
Install dependencies:
9+
10+
```bash
11+
npm install
12+
```
13+
14+
## Setting up the database
15+
16+
[Install the Turso CLI].
17+
18+
Create a new turso database.
19+
20+
```sh
21+
turso db create web-frameworks
22+
```
23+
24+
> **Note**
25+
>
26+
> We use `web-frameworks` as the database name in this command, but you can give
27+
> it any name.
28+
29+
Access the database through the Turso CLI shell.
30+
31+
```sh
32+
turso db shell web-frameworks
33+
```
34+
35+
### Create tables and indexes
36+
37+
Here's the SQL statement to create the `frameworks` table.
38+
39+
```sql
40+
-- create the "frameworks" table
41+
create table frameworks (
42+
id integer primary key,
43+
name varchar (50) not null,
44+
language varchar (50) not null,
45+
url text not null,
46+
stars integer not null
47+
);
48+
```
49+
50+
For unique column insertions, add accompanying unique indexes.
51+
52+
```sql
53+
-- name column unique index
54+
create unique index idx_frameworks_name ON frameworks (name);
55+
56+
-- url column unique index
57+
create unique index idx_frameworks_url ON frameworks (url);
58+
```
59+
60+
Seed the database with some data.
61+
62+
```sql
63+
insert into frameworks(name, language, url, stars) values("Vue".js , "JavaScript", "https://github.com/vuejs/vue", 203000);
64+
insert into frameworks(name, language, url, stars) values("React", "JavaScript", "https://github.com/facebook/react", 206000);
65+
insert into frameworks(name, language, url, stars) values("Angular", "TypeScript", "https://github.com/angular/angular", 87400);
66+
insert into frameworks(name, language, url, stars) values("ASP.NET Core", "C#", "https://github.com/dotnet/aspnetcore", 31400);
67+
insert into frameworks(name, language, url, stars) values("Express", "JavaScript", "https://github.com/expressjs/express", 60500);
68+
insert into frameworks(name, language, url, stars) values("Django", "Python", "https://github.com/django/django", 69800);
69+
insert into frameworks(name, language, url, stars) values("Ruby on Rails", "Ruby", "https://github.com/rails/rails", 52600);
70+
insert into frameworks(name, language, url, stars) values("Spring", "Java", "https://github.com/spring-projects/spring-framework", 51400);
71+
insert into frameworks(name, language, url, stars) values("Laravel", "PHP", "https://github.com/laravel/laravel", 73100);
72+
insert into frameworks(name, language, url, stars) values("Flask", "Python", "https://github.com/pallets/flask", 62500);
73+
insert into frameworks(name, language, url, stars) values("Ruby", "Ruby", "https://github.com/ruby/ruby", 41000);
74+
insert into frameworks(name, language, url, stars) values("Symfony", "PHP", "https://github.com/symfony/symfony", 28200);
75+
insert into frameworks(name, language, url, stars) values("CodeIgniter", "PHP", "https://github.com/bcit-ci/CodeIgniter", 18200);
76+
insert into frameworks(name, language, url, stars) values("CakePHP", "PHP", "https://github.com/cakephp/cakephp", 8600);
77+
insert into frameworks(name, language, url, stars) values("Qwik", "TypeScript", "https://github.com/BuilderIO/qwik", 16400);
78+
```
79+
80+
### Set up Turso on the project
81+
82+
To access the data stored inside your database, you need the Turso database url
83+
and an authentication token.
84+
85+
To obtain the database url, run the following command:
86+
87+
```sh
88+
turso db show web-frameworks --url
89+
```
90+
91+
And, to create an authentication token for your database, run:
92+
93+
```sh
94+
turso db tokens create web-frameworks
95+
```
96+
97+
Rename the `.env.example` to `.env.local` and add the values
98+
obtained above as the database url and authentication token for your Turso
99+
database.
100+
101+
```txt
102+
NEXT_TURSO_DB_URL=
103+
NEXT_TURSO_DB_AUTH_TOKEN=
104+
```
105+
106+
## Local development
107+
108+
Run the development server:
109+
110+
```bash
111+
npm run dev
112+
# or
113+
yarn dev
114+
# or
115+
pnpm dev
116+
```
117+
118+
Open [http://localhost:3000] with your browser to see the result.
119+
120+
You can start editing the page by modifying `app/page.tsx`. The page
121+
auto-updates as you edit the file.
122+
123+
This project uses [`next/font`] to automatically optimize and load Inter, a
124+
custom Google Font.
125+
126+
## Deploy on Vercel
127+
128+
The easiest way to deploy your Next.js app is to use the [Vercel Platform] from
129+
the creators of Next.js.
130+
131+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fturso-extended%2Fapp-turso-nextjs-starter&env=NEXT_TURSO_DB_URL,NEXT_TURSO_DB_AUTH_TOKEN&envDescription=To%20access%20the%20data%20stored%20inside%20your%20database%2C%20you%20need%20the%20Turso%20database%20URL%20and%20an%20authentication%20token.&envLink=https%3A%2F%2Fgithub.com%2Fturso-extended%2Fapp-turso-nextjs-starter%23set-up-turso-on-the-project&repository-name=turso-nextjs-starter&demo-title=Turso%20Nextjs%20Starter&demo-description=This%20is%20a%20Next.js%20starter%20template%20that%20uses%20Turso%20to%20store%20data%20and%20Tailwindcss%20for%20styling%2C%20deployed%20at%20the%20edge.&demo-url=https%3A%2F%2Fturso-nextjs-starter.vercel.app%2F)
132+
133+
Check out the [Next.js deployment documentation] or [Turso's Vercel setup guide]
134+
for more details.
135+
136+
## Learn More
137+
138+
To learn more about the stack used in this template, take a look at the
139+
following resources:
140+
141+
- [Next.js Documentation] - learn about Next.js features and API.
142+
- [Turso Documentation] - learn about Next.js features and API.
143+
- [Turso Community] - Join the Turso community.
144+
- [libSQL] - The open-source open-contribution fork of SQLite Turso is built on.
145+
146+
[Next.js]: https://nextjs.org/
147+
[Turso]: https://turso.tech
148+
[Tailwindcss]: https://tailwindcss.com
149+
[http://localhost:3000]: http://localhost:3000
150+
[`next/font`]: https://nextjs.org/docs/basic-features/font-optimization
151+
[Install the Turso CLI]: https://docs.turso.tech/reference/turso-cli#installation
152+
[Next.js Documentation]: https://nextjs.org/docs
153+
[Turso Documentation]: https://docs.turso.tech/
154+
[Turso Community]: https://discord.com/invite/4B5D7hYwub
155+
[Learn Next.js]: https://nextjs.org/learn
156+
[libSQL]: https://github.com/libsql/libsql
157+
[Vercel Platform]: https://vercel.com/new
158+
[Next.js deployment documentation]: https://nextjs.org/docs/deployment
159+
[Turso's Vercel setup guide]: https://docs.turso.tech/tutorials/vercel-setup-guide/

‎app-turso-nextjs-starter/app/about/page.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Link from 'next/link';
2+
3+
export const runtime = 'edge';
4+
5+
export const metadata = {
6+
title: 'About Us',
7+
description: 'Top web frameworks about page',
8+
};
9+
10+
export default async function AboutPage() {
11+
return (
12+
<>
13+
<h1> About Us </h1>
14+
15+
<p className="text-center pt-5">
16+
<span className="font-semibold">Top Web Frameworks</span> lists the top
17+
frameworks for web development based on their GitHub stars count.
18+
</p>
19+
20+
<p className="text-center pt-5">
21+
Feel free to contribute to the list by{' '}
22+
<Link href="/add-new" className="underline hover:text-teal-800">
23+
making a new submission.
24+
</Link>
25+
</p>
26+
</>
27+
);
28+
}

‎app-turso-nextjs-starter/app/add-new/form.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
input {
7+
@apply mt-1 p-2 w-full rounded-md border-gray-200 shadow-sm sm:text-sm dark:text-black;
8+
}
9+
label {
10+
@apply block text-xs font-medium text-gray-700 dark:text-gray-200 text-left pt-3 p-1;
11+
}
12+
legend,
13+
h1 {
14+
@apply text-xl font-semibold;
15+
}
16+
th {
17+
@apply font-semibold;
18+
}
19+
}

‎app-turso-nextjs-starter/app/add-new/page.tsx

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import './form.css';
2+
3+
export const runtime = 'edge';
4+
5+
export const metadata = {
6+
title: 'Add New',
7+
description: 'Contribute to the frameworks list.',
8+
};
9+
10+
export default function AddNewPage(request: { searchParams: any }) {
11+
const { error, message } = request.searchParams;
12+
13+
return (
14+
<>
15+
<h1>Submit a framework</h1>
16+
17+
<div className="mb-32 text-center lg:text-left w-[80vw] max-w-2xl flex flex-col">
18+
{message && (
19+
<div className="bg-green-200 text-green-800 p-2 w-full">
20+
{message}
21+
</div>
22+
)}
23+
{error && (
24+
<div className="bg-red-200 text-red-800 p-2 w-full">{error}</div>
25+
)}
26+
<form
27+
action="/api/add-framework"
28+
method="post"
29+
className="flex flex-col w-full"
30+
>
31+
<div>
32+
<label htmlFor="framework-name">Name</label>
33+
34+
<input
35+
type="text"
36+
name="name"
37+
id="framework-name"
38+
placeholder="Framework name"
39+
required
40+
/>
41+
</div>
42+
43+
<div>
44+
<label htmlFor="language">Language</label>
45+
46+
<input
47+
type="text"
48+
name="language"
49+
id="language"
50+
placeholder="JavaScript"
51+
required
52+
/>
53+
</div>
54+
55+
<div>
56+
<label htmlFor="github-url">Github</label>
57+
58+
<input
59+
type="text"
60+
name="url"
61+
id="github-url"
62+
placeholder="https://github.com/user/repo"
63+
required
64+
/>
65+
</div>
66+
67+
<div>
68+
<label htmlFor="stars-count">Stars count</label>
69+
70+
<input
71+
type="number"
72+
id="stars-count"
73+
name="stars"
74+
placeholder="2000"
75+
required
76+
/>
77+
</div>
78+
79+
<div className="flex justify-center p-2">
80+
<button
81+
type="submit"
82+
className="py-2 px-4 text-white font-semibold bg-teal-600 rounded-md hover:bg-teal-700 focus:relative flex space-x-2 justify-between items-center"
83+
title="View Orders"
84+
>
85+
<span>Submit</span>
86+
</button>
87+
</div>
88+
</form>
89+
</div>
90+
</>
91+
);
92+
}

0 commit comments

Comments
 (0)