Skip to content

Commit 4b1648b

Browse files
xinnksxinnks
committed
feat: Add app-ab-testing-turso-nextjs-growthbook
2 parents cc90944 + d63ec17 commit 4b1648b

32 files changed

+1166
-0
lines changed

‎ab-testing-turso-nextjs-growthbook/.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=

‎ab-testing-turso-nextjs-growthbook/.eslintrc.json

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

‎ab-testing-turso-nextjs-growthbook/.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

‎ab-testing-turso-nextjs-growthbook/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.

‎ab-testing-turso-nextjs-growthbook/README.md

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

‎ab-testing-turso-nextjs-growthbook/app/about/page.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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 frameworks for web development based on their GitHub stars count.
17+
</p>
18+
19+
<p className="text-center pt-5">
20+
Feel free to contribute to the list by <Link href="/add-new" className="underline hover:text-teal-800">making a new submission.</Link>
21+
</p>
22+
</>
23+
)
24+
}

‎ab-testing-turso-nextjs-growthbook/app/add-new/form.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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 text-left pt-3 p-1
11+
}
12+
legend, h1{
13+
@apply text-xl font-semibold
14+
}
15+
th{
16+
@apply font-semibold
17+
}
18+
}

‎ab-testing-turso-nextjs-growthbook/app/add-new/page.tsx

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
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>
16+
Submit a framework
17+
</h1>
18+
19+
<div className="mb-32 text-center lg:text-left w-[80vw] max-w-2xl flex flex-col">
20+
{
21+
message && <div className='bg-green-200 text-green-800 p-2 w-full'>
22+
{message}
23+
</div>
24+
}
25+
{
26+
error && <div className='bg-red-200 text-red-800 p-2 w-full'>
27+
{error}
28+
</div>
29+
}
30+
<form action="/api/add-framework" method="post" className="flex flex-col w-full">
31+
<div>
32+
<label htmlFor="framework-name">
33+
Name
34+
</label>
35+
36+
<input
37+
type="text"
38+
name="name"
39+
id='framework-name'
40+
placeholder="Framework name"
41+
required
42+
/>
43+
</div>
44+
45+
<div>
46+
<label htmlFor="language">
47+
Language
48+
</label>
49+
50+
<input
51+
type="text"
52+
name="language"
53+
id='language'
54+
placeholder="JavaScript"
55+
required
56+
/>
57+
</div>
58+
59+
<div>
60+
<label htmlFor="github-url">
61+
Github
62+
</label>
63+
64+
<input
65+
type="text"
66+
name="url"
67+
id="github-url"
68+
placeholder="https://github.com/user/repo"
69+
required
70+
/>
71+
</div>
72+
73+
<div>
74+
<label htmlFor="stars-count">
75+
Stars count
76+
</label>
77+
78+
<input
79+
type='number'
80+
id='stars-count'
81+
name='stars'
82+
placeholder="2000"
83+
required
84+
/>
85+
</div>
86+
87+
<div className="flex justify-center p-2">
88+
<button
89+
type="submit"
90+
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"
91+
title="View Orders"
92+
>
93+
<span>Submit</span>
94+
</button>
95+
</div>
96+
</form>
97+
</div>
98+
</>
99+
)
100+
}
101+

0 commit comments

Comments
 (0)