A website listing top web frameworks made with Nuxt and Turso.
Make sure to install the dependencies:
# yarn
yarn install
# npm
npm install
# pnpm
pnpm installStart the development server on http://localhost:3000
npm run devBuild the application for production:
npm run buildLocally preview production build:
npm run previewCheck out the deployment documentation for more information.
This project is using Nuxt, the intuitive web framework.
Inside your project, you'll see the following directory structure:
├── composables
│ └── use-turso.js
├── layouts
│ └── default.vue
└── pages/
│ ├── about.vue
│ ├── add-new.vue
│ └── index.vue
├── server
│ ├── api
│ │ ├── add.js
│ │ └── frameworks.js
│ └── utils
│ └── responseDataAdapter.js
src/pages: Houses the file-based routing files, using the layout files under/layout.- The files under
/server/apiare endpoints.
The helper functions under /server/utils are auto-imported into the endpoint
files.
Install the Turso CLI.
# On macOS or Linux with Homebrew
brew install chiselstrike/tap/turso
# Manual scripted installation
curl -sSfL <https://get.tur.so/install.sh> | bashCreate a new turso database.
turso db create [DATABASE-NAME]Access the database through the Turso CLI shell.
turso db shell [DATABASE-NAME]Here's the SQL statement to create the frameworks table.
-- create the "frameworks" table
create table frameworks (
id integer primary key,
name varchar (50) not null,
language varchar (50) not null,
url text not null,
stars integer not null
);For unique column insertions, add accompanying unique indexes.
-- name column unique index
create unique index idx_frameworks_name ON frameworks (name);
-- url column unique index
create unique index idx_frameworks_url ON frameworks (url);Seed the database with some data.
insert into frameworks(name, language, url, stars) values("Vue".js , "JavaScript", "https://github.com/vuejs/vue", 203000);
insert into frameworks(name, language, url, stars) values("React", "JavaScript", "https://github.com/facebook/react", 206000);
insert into frameworks(name, language, url, stars) values("Angular", "TypeScript", "https://github.com/angular/angular", 87400);
insert into frameworks(name, language, url, stars) values("ASP.NET Core", "C#", "https://github.com/dotnet/aspnetcore", 31400);
insert into frameworks(name, language, url, stars) values("Express", "JavaScript", "https://github.com/expressjs/express", 60500);
insert into frameworks(name, language, url, stars) values("Django", "Python", "https://github.com/django/django", 69800);
insert into frameworks(name, language, url, stars) values("Ruby on Rails", "Ruby", "https://github.com/rails/rails", 52600);
insert into frameworks(name, language, url, stars) values("Spring", "Java", "https://github.com/spring-projects/spring-framework", 51400);
insert into frameworks(name, language, url, stars) values("Laravel", "PHP", "https://github.com/laravel/laravel", 73100);
insert into frameworks(name, language, url, stars) values("Flask", "Python", "https://github.com/pallets/flask", 62500);
insert into frameworks(name, language, url, stars) values("Ruby", "Ruby", "https://github.com/ruby/ruby", 41000);
insert into frameworks(name, language, url, stars) values("Symfony", "PHP", "https://github.com/symfony/symfony", 28200);
insert into frameworks(name, language, url, stars) values("CodeIgniter", "PHP", "https://github.com/bcit-ci/CodeIgniter", 18200);
insert into frameworks(name, language, url, stars) values("CakePHP", "PHP", "https://github.com/cakephp/cakephp", 8600);
insert into frameworks(name, language, url, stars) values("Qwik", "TypeScript", "https://github.com/BuilderIO/qwik", 16400);To access the data stored inside your database, you need the Turso database url and an authentication token.
To obtain the database url, run the following command:
turso db show [DATABASE-NAME] --urlAnd, to create an authentication token for your database, run:
turso db tokens create [DATABASE-NAME] --expiration noneWhen the
–expirationflag is set tononewe are creating non-expiring tokens.
Add a .env file at the root of the project and inside it add the values
obtained above as the database url and authentication token for your Turso
database.
NUXT_TURSO_DB_URL=
NUXT_TURSO_DB_AUTH_TOKEN=To clone and deploy this project to Vercel, click on the button below.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent