Top Web Frameworks
A website listing top web frameworks made with Nuxt and Turso.
The website's being styled using TailwindCss and e2e tests are done using Cypress.
Technologies used
Setup
Make sure to install the dependencies:
# npm
npm install
Development Server
Start the development server on http://localhost:3000
npm run dev
Production
Build the application for production:
npm run build
Locally preview production build:
npm run preview
Check out the deployment documentation for more information.
Project Structure
This project is using Nuxt, the intuitive Vue framework.
Inside your project, you'll see the following directory structure:
└── pages/
│ ├── about.vue
│ ├── add-new.vue
│ └── index.vue
├── server
│ ├── api
│ │ ├── add.post.ts
│ │ └── frameworks.get.ts
│ └── utils
│ └── turso.ts
│── app.vue
src/pages
: Houses the file-based routing filesapp.vue
is the main layout of the app- The files under
/server/api
are endpoints.
The helper functions under /server/utils
are auto-imported into the endpoint
files.
Setting up the database
Create a new turso database.
turso db create web-frameworks
Set up Turso on the project
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 web-frameworks --url
And, to create an authentication token for your database, run:
turso db tokens create web-frameworks
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=
Create tables and indexes
Note
You can run npm run migrate:dev
and skip this step. Otherwise, proceed to
experience working within the Turso CLI shell.
First, access the database through the Turso CLI shell.
turso db shell web-frameworks
Next, run the following 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 clone and deploy this project to Vercel, click on the button below.