📚 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
, anddevelopment
. - Always create new branches from the
development
branch. - Once your work is tested and stable in the
development
branch, it will be merged into theproduction
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
).
- The first part should describe the type of work (e.g.,
-
Examples:
features/login-page-design
bugFix/update-font-size
Pull Requests
- After completing your task:
- Build your application.
- Fix all build errors.
- 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
-
Create an Account:
- Open an account on Softice Solutions.
- Request contributor access from your team lead.
-
Accessing Issues:
- Navigate to
Projects > Bijoy 2024 - National Public Archive > Issues
. - Check the issues created by your team lead.
- Navigate to
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
-
Pull Request:
- Once you complete an issue, follow the instructions in the GitHub guidelines to create a pull request.
-
Updating Issue Status:
- After submitting a pull request, change the issue status in Softice Solutions to
Feedback
.
- After submitting a pull request, change the issue status in Softice Solutions to
-
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.
- 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
👨💻 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! 🎉
Top comments (1)
Nice