• 

  Home page

Project Story – Tala High School Website

Inspiration

The idea for this project came from the need to modernize Tala High School’s communication and make information more accessible to students, parents, and teachers. Traditionally, announcements, events, and news were shared on noticeboards or by word of mouth, which limited reach. I was inspired by how digital platforms can bridge the communication gap and create a more connected school community.

What I Learned

• How to integrate Flask with React using REST APIs.
  
• Database schema design for real-world use cases.
  
• Authentication and session management with JWT tokens.
  
• Importance of error handling in both backend (try/except) and frontend (catching failed requests).
  
• That even small features (like image uploads or refresh buttons) can dramatically improve user experience.
  

Challenges Faced

1. Frontend-backend communication:
   At first, CORS errors and API mismatches caused blank screens (e.g., forgetting to add export default in React components).

2. Database alignment: Making sure the schema (DESCRIBE) matched what the code expected (like is_published, published_at) required debugging.

3. Authentication:
   Implementing JWT securely and handling expired tokens took several iterations.

4. Deployment mindset:
   Localhost worked fine, but preparing the app for production required rethinking configs like ALLOWED_ORIGINS and .env management.

Math Example with LaTeX

Building efficient queries reminded me of optimization problems.
For example, retrieving only n latest events is like minimizing:

$$ f(n) = \min { \text{events retrieved} \mid \text{events are ordered by date descending} } $$

This helped me think about balancing performance vs completeness in database design.

Overall, this project taught me how to design, build, and debug a full-stack school portal that can grow with the needs of the institution.

Built With

• and-admin-pages-auto-refreshing-events/news-list-for-real-time-feel-**database-schema:**-designed-4-main-tables:-1.-`admins`-(id
• and-contact-messages-jwt-authentication-for-secure-admin-login-cors-setup-for-frontend-backend-communication-**frontend:**-react-with-hooks-(`usestate`
• api
• body
• contact
• date)-3.-`news`-(id
• date)-4.-`contact-messages`-(id
• description
• email
• events
• flask
• image
• javascript
• message
• mysql
• name
• news
• password-hash)-2.-`events`-(id
• published
• react
• rest
• title
• useeffect`)-axios-based-`api.js`-for-api-calls-components-for-events
• username