📚 Data Collector Frontend - Guidelines

This project is a Next.js frontend application aimed at collecting social media data from various platforms (Facebook, YouTube, Twitter, Telegram, Instagram) through a web interface. It works in collaboration with the backend of this projec 🚀

Table of Contents

• Project Introduction Video
• GitHub Branch Maintenance Guidelines
• Softice Solutions User Guidelines
• Code Style and Formatting
• React and Next.js Best Practices
• State Management
• Form Handling
• Styling
• Performance
• Testing
• Version Control
• Documentation
• Accessibility
• Security

🎥 Project Introduction Video

🚀 Quick Start

Prerequisites

• Node.js (version X.X.X or higher)
• NPM (Node package manager)

Installation

Install and run the project with yarn:

npm install
npm run dev

📚 Documentation

🌿 GitHub Branch Maintenance Guidelines

📹 Github Guidelines Video

To ensure consistency and maintain the quality of our codebase, please adhere to the following branch maintenance rules:

Branch Structure

• Our repository is organized with three main branches: main, production, and development.
• Always create new branches from the development branch.
• Once your work is tested and stable in the development branch, it will be merged into the production branch for deployment.

Branch Naming Conventions

• Use meaningful branch names that include at least two parts:
  • The first part should describe the type of work (e.g., features, bugFix).
  • The second part should specify the issue or task (e.g., login-page-design, update-font-size).
• Examples:
  • features/login-page-design
  • bugFix/update-font-size

Pull Requests

• After completing your task:
  1. Build your application.
  2. Fix all build errors.
  3. Create a Pull Request (PR) to the development branch.
• Your code will be reviewed before it's merged into the development branch.

🛠 Softice Solutions User Guidelines

We manage our projects in Softice Solutions, powered by Redmine. Follow these steps to get started:

Getting Started

1. Create an Account:
   • Open an account on Softice Solutions.
   • Request contributor access from your team lead.
2. Accessing Issues:
   • Navigate to Projects > Bijoy 2024 - National Public Archive > Issues.
   • Check the issues created by your team lead.

Working on Issues

• Assigning Issues:
  • If an issue is not assigned to anyone, you can assign it to yourself and start working on it.
• Logging Progress:
  • Regularly add comments in the Log Time section so that other team members and your team lead are aware of your progress and the current status of the issue.

Completing Issues

1. Pull Request:
   • Once you complete an issue, follow the instructions in the GitHub guidelines to create a pull request.
2. Updating Issue Status:
   • After submitting a pull request, change the issue status in Softice Solutions to Feedback.
3. Review and Merge:
   • Your team lead will review the changes. If everything is satisfactory, the issue will be resolved, and your sub-branch will be merged into the development branch.

👨‍💻 Developer Guidelines

This guide will help you maintain high-quality code and follow best practices. Let's build something amazing together! 🚀

Code Style and Formatting

✅ Do:

• Follow the Airbnb JavaScript Style Guide
• Use ESLint to catch and fix style issues
• Leverage TypeScript for type safety
• Write self-documenting code with clear names

❌ Don't:

• Ignore ESLint warnings or errors
• Use any type in TypeScript unnecessarily
• Leave commented-out code in the codebase

React and Next.js Best Practices

✅ Do:

• Use functional components and hooks
• Implement proper error boundaries
• Utilize Next.js built-in optimizations
• Keep components small and focused

❌ Don't:

• Use class components without good reason
• Modify the DOM directly
• Ignore React key warnings

State Management

✅ Do:

• Use React's useState and useContext
• Consider Redux for complex state

❌ Don't:

• Overuse global state
• Mutate state directly

Form Handling

✅ Do:

• Leverage Formik for form management
• Implement Yup schemas for validation
• Create reusable form components

❌ Don't:

• Create forms without proper validation
• Ignore accessibility in form design

Styling

✅ Do:

• Use Tailwind CSS for styling
• Utilize Ant Design (antd) components
• Maintain a consistent design system

❌ Don't:

• Mix different styling approaches
• Unnecessarily override Ant Design styles

Performance

✅ Do:

• Optimize images and assets
• Use React.memo, useMemo, and useCallback wisely
• Implement loading states and skeleton screens

❌ Don't:

• Prematurely optimize
• Load unnecessary assets

Testing

✅ Do:

• Write unit tests for utils and hooks
• Implement integration tests for key flows
• Use React Testing Library

❌ Don't:

• Skip tests for new features or bug fixes
• Test implementation details

Documentation

✅ Do:

• Document complex logic or algorithms
• Keep README and docs up-to-date
• Use JSDoc comments

❌ Don't:

• Neglect updating docs with changes
• Write unnecessary comments

Accessibility

✅ Do:

• Ensure proper keyboard navigation
• Use semantic HTML elements
• Implement ARIA attributes when needed

❌ Don't:

• Ignore color contrast issues
• Use non-standard UI patterns carelessly

Security

✅ Do:

• Sanitize user inputs
• Use environment variables for sensitive info
• Keep dependencies up-to-date

❌ Don't:

• Store sensitive information in frontend code
• Ignore security warnings

Thank you for following these guidelines to ensure smooth collaboration and project management. Happy coding! 🎉