DoutorBytesNext is the online presence of DoutorBytes, a computer repair shop located in Lisbon, Portugal. This platform is designed to provide information about our services, allow customers to book appointments, and offer technical support. Our primary purpose is to provide accessible and reliable computer repair services.
- Frontend:
- Next.js: A React framework for production, enabling server-side rendering (SSR), static site generation (SSG), and API routes for optimal performance and SEO.
- React: A JavaScript library for building user interfaces, forming the core of our interactive components.
- TypeScript: A superset of JavaScript that adds static typing, enhancing code quality, maintainability, and developer experience.
- Backend:
- Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine, used for building scalable network applications and API endpoints.
- Express.js: A fast, unopinionated, minimalist web framework for Node.js, used for building our RESTful APIs.
- Python (for AI/ML): Utilized for developing and deploying our AI models, including natural language processing (NLP) and machine learning algorithms for symptom analysis.
- Database:
- PostgreSQL: A powerful, open-source object-relational database system known for its strong reliability, feature robustness, and performance.
- UI/UX:
- Tailwind CSS: A utility-first CSS framework for rapidly building custom designs without leaving your HTML.
- Framer Motion: A production-ready motion library for React, enabling fluid animations and transitions.
- Radix UI: An open-source component library for building high-quality, accessible UI components with unstyled primitives.
- Deployment & Hosting:
- Vercel: For seamless frontend deployment of Next.js applications.
- AWS EC2/Docker: For backend API hosting and containerization.
.github/
├── workflows/ # GitHub Actions CI/CD workflows
public/
├── assets/ # Static assets (images, fonts, etc.)
├── favicon.ico
├── index.html
└── logo.svg
src/
├── api/ # Backend API routes and services (Node.js/Express.js)
│ ├── controllers/
│ ├── models/
│ └── routes/
├── components/ # Reusable React components
│ ├── ui/ # Radix UI based components
│ └── common/
├── config/ # Application-wide configurations
├── context/ # React Context API for global state management
├── hooks/ # Custom React hooks
├── layouts/ # Page layouts
├── lib/ # Utility functions and helpers
├── pages/ # Next.js pages (frontend routes)
├── styles/ # Global styles and Tailwind CSS configurations
├── types/ # TypeScript type definitions
└── utils/ # General utilities
docs/
├── README.md # Documentation index
└── reports/ # Security and quality reports
└── README.md
.env.example # Example environment variables
.eslintrc.json # ESLint configuration
.prettierrc.json # Prettier configuration
nexconfig.js # Next.js configuration
package.json # Project dependencies and scripts
README.md # Main project documentation (this file)
tsconfig.json # TypeScript configuration
yarn.lock # Yarn dependency lock file
Before you begin, ensure you have the following software installed on your machine:
- Node.js: Version 18.x or higher. You can download it from nodejs.org.
- Yarn: Version 1.x or higher (recommended package manager). Install with
npm install -g yarn. - Git: Latest version. Download from git-scm.com.
- PostgreSQL: Version 14.x or higher. Download from postgresql.org.
Follow these steps to get the DoutorBytesNext project up and running locally:
-
Clone the repository:
git clone https://github.com/DoutorBytes/DoutorBytesNext.git cd DoutorBytesNext -
Install frontend dependencies:
yarn install
-
Install backend dependencies (if separate, otherwise included in root yarn install): If your backend (
src/api) has a separatepackage.json:cd src/api yarn install cd ../..
-
Environment Variables: Create a
.env.localfile in the project root by copying.env.example:cp .env.example .env.local
Edit
.env.localand set the following variables:# Database Configuration DATABASE_URL="postgresql://user:password@host:port/database" # AI Service API Key AI_API_KEY="your_ai_service_api_key" # Authentication Secret (for JWTs or similar) NEXTAUTH_SECRET="super_secret_key_for_auth" NEXTAUTH_URL="http://localhost:3000" # Other configurations NODE_ENV="development"
Replace placeholders with your actual credentials and settings.
-
Database Setup:
- Ensure your PostgreSQL server is running.
- Create a database for the project (e.g.,
doutorbytes_db). - Run database migrations (if using an ORM like Prisma or TypeORM):
# Example with Prisma, adjust based on your ORM npx prisma migrate dev --name init
-
Running the Development Server: To start the Next.js development server:
yarn dev
The application will be accessible at
http://localhost:3000. -
Running Backend API (if separate): If your backend API is a separate process:
cd src/api yarn start # or `yarn dev` if you have a dev script
(Adjust command based on your backend setup, e.g.,
npm run devornode server.js) -
Making an API Request (Example): Once the backend is running, you can test an API endpoint (e.g., for symptom analysis):
curl -X POST \\ http://localhost:3000/api/consultation/analyze-symptoms \\ -H 'Content-Type: application/json' \\ -d '{"symptoms": "headache, fever, fatigue"}'
-
Running Tests: To execute unit and integration tests:
yarn test
Our design system ensures consistency, accessibility, and a cohesive user experience across the DoutorBytesNext platform.
| Name | Hex Code | Usage |
|---|---|---|
| Primary Blue | #007BFF |
Main branding, primary actions |
| Accent Green | #28A745 |
Success states, positive indicators |
| Warning Yellow | #FFC107 |
Alerts, cautionary elements |
| Danger Red | #DC3545 |
Error states, destructive actions |
| Neutral Gray | #6C757D |
Secondary text, borders, backgrounds |
| Light Gray | #F8F9FA |
Backgrounds, subtle separators |
| Dark Blue | #0056B3 |
Hover/active states for primary |
- Font Family: 'Inter', sans-serif (or similar modern sans-serif font)
- Headings (H1-H6): Bold, darker shades of primary colors.
- H1: 3.5rem (56px), font-weight: 700
- H2: 2.5rem (40px), font-weight: 700
- H3: 2rem (32px), font-weight: 600
- Body Text: Regular, neutral gray.
- Paragraphs: 1rem (16px), font-weight: 400, line-height: 1.6
- Small text: 0.875rem (14px), font-weight: 400
- Links: Primary blue, underlined on hover.
- Buttons: Consistent padding, rounded corners, clear hover/active states. Primary buttons use
Primary Blue, secondary buttonsNeutral Grayoutlines. - Forms: Accessible labels, clear input states (focus, error, success), consistent spacing. Validation feedback is immediate and visually clear.
- Cards: Subtle shadows, rounded borders, well-defined content areas for information hierarchy.
- Modals/Dialogs: Centered, clear close actions, focus management for accessibility.
- Duration: Short and subtle for most UI interactions (e.g., 150ms - 300ms).
- Easing Functions:
ease-in-outfor smooth, natural transitions. Avoid abrupt animations. - Purpose: Animations are used to provide feedback, guide user attention, and enhance perceived performance, not merely for decoration.
{
"env": {
"browser": true,
"node": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"next",
"next/core-web-vitals"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
"react/react-in-jsx-scope": "off",
"@typescript-eslint/explicit-module_boundary-types": "off",
"@typescript-eslint/no-explicit-any": "off",
"no-unused-vars": "warn",
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
domains: ['example.com', 'another-domain.com'], // Add allowed image domains
},
// Optionally, add more advanced configurations
// webpack(config, { isServer }) {
// if (!isServer) {
// config.resolve.fallback.fs = false;
// }
// return config;
// },
};
module.exports = nextConfig;DoutorBytesNext is optimized for deployment on Vercel, especially for its Next.js frontend:
- Link to Git Repository: Connect your Vercel account to your GitHub/GitLab/Bitbucket repository.
- Project Setup: Vercel automatically detects Next.js projects. Configure environment variables (e.g.,
DATABASE_URL,AI_API_KEY,NEXTAUTH_SECRET) directly in the Vercel dashboard under Project Settings > Environment Variables. - Automatic Deployments: Every push to the main branch (or a configured production branch) will trigger an automatic build and deployment.
- Custom Domains: Add and configure your custom domain through the Vercel dashboard.
For the Node.js/Express.js backend, a typical deployment involves EC2 with Docker:
- Prepare Docker Image:
- Create a
Dockerfilein your backend directory (e.g.,src/api/Dockerfile). - Build and push your Docker image to a container registry (e.g., Amazon ECR, Docker Hub):
docker build -t doutorbytes-backend . docker tag doutorbytes-backend:latest your_aws_account_id.dkr.ecr.your_region.amazonaws.com/doutorbytes-backend:latest aws ecr get-login-password --region your_region | docker login --username
- Create a