About • Roadmap • Technologies • Structure • Getting Started • Related Projects
Biko is a platform that connects clients to informal service providers, working like a social network where users can register, share their work, and interact through posts, likes and comments.
This codebase handles the Frontend experience, developed in Next.js + TypeScript to create a clean and engaging interface.
🔗 The backend API developed with Laravel is available here.
This project was developed as the final assignment for the Laboratory of Innovative Enterprises course in the Analysis and Systems Development (ADS) program at UNINASSAU. It aims to provide a practical solution connecting informal service providers with potential clients through a social platform, demonstrating the application of software development skills and innovative business concepts learned throughout the course.
💻 You can try the live version at biko.byissa.tech
- User registration and authentication (login, logout)
- Timeline-style publication of user content
- Likes and comments for interaction
- Post classification by category and user type (client or provider)
- Filtering of posts by category, user type, location, and sorting (latest or most popular)
- Logged-in user profile editing, including activity categories
- Public user profiles with posts and basic interaction history
- Service reviews from both clients and providers
- Real-time notifications
- Private messaging/chat system
- Post saving/bookmarking
- Report system for inappropriate content
This project was built using the following technologies and tools:
- Next.js — React-based framework for building fast web applications
- TypeScript — Strongly typed language for scalable code
- CSS Modules — Scoped and modular CSS styling
- IBGE API — For location data (states and cities)
Overview of the main folders and files in the project:
📂 components/ # Reusable UI components
┣ 📄 Feed.tsx # Main feed with publications
┣ 📄 Sidebar.tsx # Sidebar menu with filters
┗ 📂 ultils/ # UI helpers (modals, selectors, options)
┣ 📄 CategorySelector.tsx
┣ 📄 ModalConfirm.tsx
┗ 📄 Options.tsx
📂 models/ # TypeScript interfaces for data models
┣ 📄 User.ts
┣ 📄 Category.ts
┣ 📄 Publication.ts
┣ 📄 Comment.ts
┣ 📄 Like.ts
┣ 📄 Chat.ts
┣ 📄 State.ts
┗ 📄 City.ts
📂 pages/ # Application routes (Next.js routing)
┣ 📄 index.tsx # Home / Feed
┣ 📄 login.tsx
┣ 📄 register.tsx
┣ 📄 edit-perfil.tsx # Profile edit page
┣ 📄 notifications.tsx
┣ 📄 chat.tsx
┣ 📂 profile/
┃ ┗ 📄 [id].tsx # Public profile page
┣ 📂 posts/
┃ ┗ 📄 [id].tsx # Post details page
┣ 📄 search.tsx
┣ 📄 _app.tsx # Root app wrapper
┗ 📄 _document.tsx # Custom document structure
📂 public/
┗ 📂 midia/ # Static media assets
┣ 📄 background.jpg
┗ 📄 icon.png
📂 services/ # API service handlers (axios)
┣ 📄 authService.ts
┣ 📄 userService.ts
┣ 📄 publicationService.ts
┣ 📄 categoryService.ts
┗ 📄 ibgeService.ts
📂 styles/ # CSS Modules and global styles
┣ 📄 styles.css # Global styles
┣ 📂 ultils/
┃ ┣ 📄 categorySelector.module.css
┃ ┣ 📄 confirmModal.module.css
┃ ┣ 📄 options.module.css
┃ ┗ 📄 publications.module.css
┣ 📄 feed.module.css
┣ 📄 form.module.css
┣ 📄 home.module.css
┣ 📄 perfil.module.css
┣ 📄 profile.module.css
┣ 📄 chat.module.css
┗ 📄 search.module.css
📂 utils/ # Utility functions and axios instance
┣ 📄 api.ts # Axios base config
┗ 📄 auth.ts # Token storage and validation
📄 .env.local # Environment variables (API URL)
📄 package.json # Dependencies and scripts
📄 tsconfig.json # TypeScript config
📄 next.config.mjs # Next.js configuration- Node.js >= 16.x
- npm >= 8.x or yarn >= 1.x
- Backend API running (Laravel API)
# Clone the repository
git clone https://github.com/issagomesdev/biko.git
cd biko
# Install dependencies
npm install
# or
yarn install
# Create a `.env.local` file and add the following environment variable:
NEXT_PUBLIC_API_URL=your_api_url_here
# Make sure the backend API is running and accessible at the URL set in NEXT_PUBLIC_API_URL.
# Run the development server
npm run dev
# ou
yarn dev🧱 Backend (Laravel API) repository here