Project Story
About the Project
VisionEd is a platform designed to empower educators by streamlining lesson planning and fostering collaboration. Inspired by the challenges teachers face in organizing and generating effective lesson plans, this project aims to simplify their workload and provide a user-friendly interface for seamless planning.
What Inspired Me
As a tutor, I've noticed the time and effort it takes to plan lessons while maintaining creativity and meeting diverse classroom needs. When students aren't open about their needs it can be difficult to know what material to cover. Teachers and professors face this at a much larger scale every day they step into their classrooms. The idea for VisionEd emerged from this need to create a tool that saves time, enhances productivity, and empowers teachers to focus more on engaging their students.
What I Learned
Technical Skills:
- Deepened my understanding of React.js and component-based architecture.
- Gained experience with Flexbox for responsive design and Tailwind CSS for rapid styling.
- Learned how to implement routing with
react-router-domto build a multi-page application.
Problem-Solving:
- Improved my debugging skills, especially when handling complex state and reactivity in React.
- Learned how to resolve conflicts when pushing changes to a remote Git repository.
Collaboration:
- Enhanced my ability to document and share project updates on platforms like GitHub for version control and team collaboration.
How I Built the Project
Tech Stack:
- Frontend: React.js, Tailwind CSS for UI styling, React Router for navigation.
- Backend (if applicable): Node.js and Express.js for APIs (or any backend framework you used).
- Version Control: Git and GitHub to manage the codebase.
Development Workflow:
- Designed wireframes to visualize the layout of the Welcome Screen, Login Page, and Dashboard.
- Built reusable components for inputs, buttons, and forms using React.
- Utilized Tailwind CSS for rapid styling and consistent visuals.
- Added Flexbox-based layouts to ensure responsiveness on different screen sizes.
Challenges Faced
Styling Challenges:
- Aligning components properly while maintaining responsiveness was initially tricky. Using Flexbox and Tailwind CSS helped streamline this process.
Git Conflicts:
- Faced conflicts when pushing changes to the remote branch, but resolved them by learning to rebase and merge effectively.
Time Management:
- Balancing feature development with debugging and styling within a limited timeline was challenging.
Future Enhancements
Collaboration Features:
- Allow teachers to share and collaborate on lesson plans in real-time.
Integration:
- Add support for exporting lesson plans to PDF or integrating with third-party tools like Google Classroom.
Enhanced AI Tools:
- Incorporate AI to suggest improvements for lesson plans based on input topics and grade levels.
Built With
- ai
- axios
- css
- dotenv
- express.js
- huggingface
- javascript
- jsx
- node.js
- nodemon
- react
- tailwind
Log in or sign up for Devpost to join the conversation.