Skip to content

Commit 3e298e4

Browse files
freddysonggfreddysongg
committed
chore: readme
1 parent 317612d commit 3e298e4

1 file changed

Lines changed: 151 additions & 50 deletions

File tree

‎README.md‎

Lines changed: 151 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,151 @@
1-
# React + TypeScript + Vite
2-
3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4-
5-
Currently, two official plugins are available:
6-
7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9-
10-
## Expanding the ESLint configuration
11-
12-
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13-
14-
- Configure the top-level `parserOptions` property like this:
15-
16-
```js
17-
export default tseslint.config({
18-
languageOptions: {
19-
// other options...
20-
parserOptions: {
21-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
22-
tsconfigRootDir: import.meta.dirname,
23-
},
24-
},
25-
});
26-
```
27-
28-
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29-
- Optionally add `...tseslint.configs.stylisticTypeChecked`
30-
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31-
32-
```js
33-
// eslint.config.js
34-
import react from 'eslint-plugin-react';
35-
36-
export default tseslint.config({
37-
// Set the react version
38-
settings: { react: { version: '18.3' } },
39-
plugins: {
40-
// Add the react plugin
41-
react,
42-
},
43-
rules: {
44-
// other rules...
45-
// Enable its recommended rules
46-
...react.configs.recommended.rules,
47-
...react.configs['jsx-runtime'].rules,
48-
},
49-
});
50-
```
1+
# LeftRight
2+
3+
**A Political Alignment Trivia Game**
4+
5+
## **Project Overview**
6+
**LeftRight** is an engaging political alignment quiz web application designed with a modern swiping interface. Mimicking the interaction style of Tinder, users can swipe right to agree or left to disagree with a series of trivia questions. The game calculates their political alignment based on their responses and provides a summary of their alignment in a results screen.
7+
8+
---
9+
10+
## **Features**
11+
12+
### **Interactive Swiping Mechanic**
13+
- Users interact by swiping cards left or right to answer questions.
14+
- Each swipe indicates agreement (right) or disagreement (left) with the question.
15+
16+
### **Dynamic Question Selection**
17+
- Questions are dynamically selected and shuffled from four predefined categories: Economic, Social, Foreign, and Domestic.
18+
- Ensures a balanced question set for each quiz session.
19+
20+
### **Real-Time Feedback**
21+
- Swipes are registered instantly, and the interface updates dynamically.
22+
- Smooth animations enhance user experience.
23+
24+
### **Political Alignment Calculation**
25+
- Uses user responses to calculate their political alignment (e.g., left-leaning, right-leaning, or centrist).
26+
- Displays results on a dedicated summary screen.
27+
28+
### **Responsive Design**
29+
- Optimized for mobile, tablet, and desktop devices.
30+
- Dynamically adjusts padding and card heights to prevent overflow and ensure usability.
31+
32+
### **Toast Notifications**
33+
- Provides feedback for specific actions (e.g., copying a link) using toast notifications.
34+
35+
---
36+
37+
## **Technical Stack**
38+
39+
### **Frontend**
40+
- **React + TypeScript:**
41+
- Provides a type-safe and modular structure for building interactive UI components.
42+
- Key components:
43+
- `CardStack`: Manages the stack of swipable cards.
44+
- `QuestionCard`: Displays individual trivia cards.
45+
- `ResultScreen`: Shows the user's political alignment after completing the quiz.
46+
47+
- **Framer Motion:**
48+
- Enables smooth animations for swiping and gestures.
49+
- Handles drag gestures for interactive swiping mechanics.
50+
51+
- **Tailwind CSS:**
52+
- Ensures clean, utility-first responsive styling.
53+
54+
### **State Management**
55+
- **useState and useEffect:**
56+
- Tracks game state, user responses, and whether the game is complete.
57+
58+
### **Data Handling**
59+
- **Dynamic Question Selection:**
60+
- Shuffles and selects questions using `lodash.shuffle`.
61+
- Categorizes questions to ensure balanced representation.
62+
63+
### **Responsive Design**
64+
- Uses a custom `useDeviceType` hook to detect device type and adjust layout dynamically.
65+
- Ensures a consistent experience across screen sizes.
66+
67+
---
68+
69+
## **Game Mechanics**
70+
71+
### **Question Handling**
72+
- Questions are divided into four categories:
73+
- Economic, Social, Foreign, Domestic.
74+
- Three questions are selected randomly from each category.
75+
76+
### **Swiping Interaction**
77+
- Users swipe cards left to disagree or right to agree.
78+
- Swipes trigger animations and update the user’s responses.
79+
80+
### **Result Calculation**
81+
- A custom alignment algorithm processes the responses and determines the user's political stance.
82+
- Results are displayed in a visually appealing summary screen.
83+
84+
---
85+
86+
## **How It Works**
87+
88+
### **User Flow**
89+
1. Users start the quiz by swiping through trivia cards.
90+
2. For each question, users swipe left or right to register their responses.
91+
3. After all questions are answered, the app calculates their political alignment and displays the result.
92+
93+
### **Technical Flow**
94+
1. On initialization:
95+
- Questions are shuffled and categorized.
96+
- State variables (`responses`, `gameComplete`, etc.) are initialized.
97+
2. During the game:
98+
- Swiping a card updates the `responses` state.
99+
- Animation and feedback are provided in real-time.
100+
3. After the game:
101+
- Results are calculated using `calculateAlignment`.
102+
- The result screen is displayed.
103+
104+
---
105+
106+
## **Challenges Addressed**
107+
108+
### **Dynamic Layout Management**
109+
- Resolved overflow and spacing issues by dynamically adjusting padding and height based on the device type.
110+
111+
### **Smooth Animations**
112+
- Optimized swipe animations with Framer Motion to ensure responsiveness on mobile and desktop.
113+
114+
### **User Engagement**
115+
- Designed a modern, intuitive interface to make the game fun and accessible.
116+
117+
---
118+
119+
## **Potential Extensions**
120+
1. **Customizable Questions:**
121+
- Allow users to add or select questions for a personalized experience.
122+
123+
2. **Social Sharing:**
124+
- Enable users to share their results on social media platforms.
125+
126+
3. **Detailed Analysis:**
127+
- Provide detailed insights and breakdowns of the user’s political alignment.
128+
129+
4. **Gamification:**
130+
- Introduce badges or achievements to enhance engagement.
131+
132+
5. **AI-Generated Questions:**
133+
- Use AI to dynamically generate unique questions tailored to user preferences.
134+
135+
---
136+
137+
## **Testing and Debugging**
138+
139+
### **Debugging Swipe Performance**
140+
- Use Chrome DevTools to analyze performance and FPS.
141+
- Optimize animations and event handlers for responsiveness.
142+
143+
### **Responsive Testing**
144+
- Test on different devices using browser DevTools or physical devices.
145+
146+
---
147+
148+
## **Acknowledgments**
149+
- Built with ❤️ using React, TypeScript, Tailwind CSS, and Framer Motion.
150+
- Inspired by interactive quiz platforms and swipe-based apps like Tinder.
151+

0 commit comments

Comments
 (0)