Acti

Acti is an open-source directory platform built with Next.js and React that centralizes and presents any kind of listing — its reference deployment catalogs activities across Quebec — using a Supabase-backed PostgreSQL database and serverless API routes on Vercel.

What is Acti?

Acti is a reusable web application that turns a structured dataset of places or activities into a browsable, searchable directory. Its input is a Supabase database table with columns for name, description, address, price, carbon footprint, seasons, social media, and more; its output is a public website with a map, filters, and search. The project is developed by AlexisAnzieu and released under the MIT license. The live version is meant to be deployed on Vercel, with a frontend in Next.js and a backend that lives inside the pages/api folder, so the whole app runs as a single serverless deployment.

Key Features

• Rendering strategies — Uses client-side rendering (CSR) for the main list to stay fast during filtering, and static site generation (SSG) for individual detail pages, so those pages can be served from a CDN.
• Filtering and search — Visitors can narrow the directory by criteria stored in the schema (for example, price, city, or season) and use text search to find entries.
• Map service — Integrates Leaflet to display each entry's location, using the location JSON column of the database.
• Internationalization — Ships with i18next support, so labels and content can be translated into multiple languages.
• Analytics — Includes Google Analytics, connected through the analytics feature, so owners can track visits.
• Tech stack — Built with TypeScript, React, and Next.js on the frontend, styled with Chakra-UI, validated with Formik, and formatted with ESLint; dates are handled with Dayjs.
• Database schema — The Supabase project includes a ready-made table with columns for company, picture_url, address, city, postal_code, phone, price, carbon_footprint, id, email, website, created_at, name (jsonb), social_media (json), description (jsonb), location (json), review (jsonb), and seasons (array). Supabase can generate a TypeScript file for these types at https://supabase.com/docs/reference/javascript/generating-types.

Who should use Acti?

Developers who want a head start on a directory or listings site can copy Acti and swap the data source: replace the activities in the database with any collection of places, products, or events. Local tourism or community organizations can use the Quebec deployment as a template for promoting regional activities with map, search, and filtering. Freelancers or agencies can use Acti as a boilerplate to deliver similar projects to clients, since the code is MIT-licensed and the backend is decoupled from the frontend.

What can you do with Acti?

• Create an activity directory — Populate the Supabase table with your own entries and deploy the site on Vercel to publish a ready-to-use directory.
• Add multilingual support — Use the i18next integration to offer the site in multiple languages without rewriting components.
• Integrate a map — Let visitors see entries on a Leaflet map, with location data pulled from each row's JSON field.
• Track engagement — Connect Google Analytics to monitor how visitors use the filtering and search features.

How does Acti work?

Installation follows three steps documented in the repo: install Node.js, copy the .env.example file to .env and fill it with Supabase credentials, then run the application. The frontend and backend are decoupled — the backend is implemented as Next.js API routes under pages/api, where the Supabase client is called; you can replace Supabase with any external service. The database schema is intentionally generic (name, description, location, price, etc.) so the same app can be reused for different domains.

Pricing

Acti itself is free and open source under the MIT license. According to the project's Tiers section, all the SaaS products it depends on — Vercel, Supabase, SonarCloud, Google Analytics, and Sendinblue — are free to use for open-source projects, which keeps the running cost at zero for a typical open-source deployment.

FAQ

Is Acti free to use?

Yes. The repository is released under the MIT license, and the listed dependencies (Vercel, Supabase, SonarCloud, Google Analytics, Sendinblue) are free for open-source projects, as stated in the project's Tiers section.

What tech stack does Acti use?

Acti uses Next.js, React, TypeScript, and Chakra-UI on the frontend; Supabase for the database; Leaflet for mapping; Formik for form validation; i18next for translations; Dayjs for dates; and ESLint for code formatting.

Can I replace the backend?

Yes. The backend is a set of Next.js API routes in the pages/api folder that call Supabase, and the README notes you can replace it with any external service.

How do I deploy Acti?

The project is designed for Vercel. After filling the .env file with your Supabase credentials, you can deploy via Vercel's normal Next.js build process.