Questions about ITSMA Flashcards
(30 cards)
Can you describe the purpose and functionality of your travel itinerary app?
The app allows users to create and share travel itineraries, incorporating social media features for trip sharing, photo/video uploads, and live updates. Users can check off itinerary items, share them with followers, and update others on their trip progress. The feed aggregates posts from followed users and hashtags, providing a dynamic social experience around travel planning.
How did you implement user authentication and authorization in your app?
Answer: I implemented user authentication using JWT (JSON Web Tokens). When users log in, they receive a JWT token that is stored in local storage. This token is included in the Authorization header for API requests, allowing the server to verify the user’s identity by decoding the token. For authorization, I use role-based access control, where certain routes are only accessible to authenticated users.
How did you implement the social media features (trip sharing, live updates, etc.) in the app?
nce I didn’t use Socket.io, the app relies on traditional polling to simulate live updates. When users post updates (photos/videos or itinerary updates), these are stored in a database and fetched via periodic API calls from the frontend (e.g., using setInterval to refresh the user feed). To display live updates in the user’s feed, the frontend queries the backend for new posts periodically. Additionally, the user can post updates via forms, which trigger API requests to store the data in MongoDB.
What technology stack did you use for the backend and why?
I chose the MERN stack for its seamless integration between JavaScript on both the client and server side.
Node.js provides an event-driven, non-blocking I/O model which is ideal for handling multiple requests efficiently. Express.js simplifies routing and middleware management, ensuring clean and maintainable code. MongoDB offers flexible document-based data storage, perfect for managing dynamic and evolving data such as itineraries, user posts, and media. JWT provides a lightweight mechanism for authentication and authorization, making session management stateless and scalable.
How do you handle media files (images/videos) in your app?
I use Cloudinary for storing and delivering media files. The frontend sends media files to Cloudinary using their API, and Cloudinary returns a URL for each file. The URL is then saved in the MongoDB database and retrieved whenever the media needs to be displayed on the frontend. I implemented file validation on the backend to ensure only supported file types (JPG, PNG, MP4) are uploaded, along with size restrictions to avoid performance bottlenecks.
How do you ensure data consistency when users update itinerary items?
I ensure data consistency by using atomic updates in MongoDB. For example, when an itinerary item is marked as completed, the API route performs an update operation on the itinerary document in the database using the $set operator. This ensures that the update is either fully applied or not at all, maintaining consistency.
What is the structure of your MongoDB database, and how did you design it?
My database design consists of four main collections:
Users: Stores user credentials (hashed passwords) and profile information, along with an array of following users and hashtags. Itineraries: Stores the itinerary details such as locations, dates, and a list of activities. Each itinerary document includes an array of itinerary items with timestamps and completion status. Posts: Stores user-generated content, including photos, captions, and timestamps. Hashtags: Stores hashtag data to enable searching and categorizing content by hashtags. Each post can be tagged with multiple hashtags.
How did you implement the trip feed and follow functionality?
I implemented following functionality by updating the following array in the user model. When users follow another user or hashtag, the data is added to their list of followed items. The trip feed is populated by querying the backend for posts from followed users and hashtags. The feed is fetched using a GET request with filters to include only posts from the followed users/hashtags.
What was your approach to handling the front-end side of the app (React)?
I used React to build a dynamic, component-based UI. The app’s layout is split into reusable components (e.g., Post, Feed, ItineraryItem, etc.). I used React Router to handle page navigation (e.g., different routes for user profiles, itineraries, and the home feed). For state management, I used React’s useState and useContext to manage global state, especially for user authentication, followed users, and itinerary data.
How did you handle user interactions and form submissions on the front end?
I used React’s useState hook to manage form inputs, with form validation handled through simple JavaScript functions (e.g., checking if all required fields are filled). Upon form submission, I used Axios to send POST requests to the server. The responses from the server are used to update the UI dynamically (e.g., adding the new post to the feed).
How did you handle error handling in the app, both client-side and server-side?
On the server side, I implemented a global error handler that catches all unhandled exceptions and returns appropriate HTTP status codes (e.g., 400 for bad requests, 500 for server errors). On the frontend, I used Axios interceptors to handle API request errors. If a request fails, the app shows a user-friendly error message (e.g., “Failed to load posts”). For user input errors, form validation provides feedback before submission.
What is your approach to testing your app?
While I haven’t implemented full testing, I plan to integrate Jest for unit tests in the future. For now, I focus on manual testing, ensuring that all key features (e.g., posting updates, following users) function as expected across different browsers and devices. I also conduct thorough testing of the API endpoints using Postman to check for edge cases and ensure proper error handling.
How do you handle pagination and infinite scrolling in your feed?
I implemented pagination on the backend by using MongoDB’s skip() and limit() methods to fetch a specific number of posts per request. The frontend requests the first set of posts and subsequently triggers a new request when the user scrolls near the end of the feed, loading the next set of posts.
What challenges did you face when building the social media features?
One challenge was efficiently handling large amounts of data, such as photos and videos in the user feed. To address this, I used pagination and lazy loading for images, ensuring that not all posts are fetched at once. Additionally, implementing real-time updates (without Socket.io) was challenging, so I opted for periodic polling of the server for new posts.
How do you manage user privacy and data security in the app?
To protect user privacy, I use bcrypt.js to hash passwords and store them securely in the database. Additionally, I use HTTPS for secure communication between the client and server. For access control, I ensure that sensitive data like passwords are never exposed in API responses, and user content is only accessible to the user or their followers.
What’s your approach to deployment and hosting of the app?
I deploy the backend API on Heroku with MongoDB Atlas for database hosting. The frontend is deployed on Netlify, which provides continuous integration for React apps. I use Amazon S3 or Cloudinary for media file storage and serve static assets from a CDN to improve performance.
How do you handle session management in your app?
I handle session management using JWT for stateless authentication. When a user logs in, they receive a JWT token, which is stored in localStorage on the client-side. The token is included in every subsequent request to the backend API, where the server verifies it and grants access to protected routes.
How do you handle real-time notifications without Socket.io?
I used periodic polling to simulate real-time notifications. Every 30 seconds, the frontend sends a request to the server to check for new posts, updates, or notifications for the user. This mimics a “live” experience without relying on websockets or real-time communication libraries like Socket.io.
What is your strategy for handling large media files and maintaining app performance?
I optimize large media files by enforcing size limits on uploads (e.g., 10 MB for images, 50 MB for videos) and compressing images before upload using libraries like sharp. Additionally, I ensure images are served in optimized formats (e.g., WebP) and implement lazy loading of images and videos, so they’re only loaded when they enter the viewport.
How do you ensure the app scales as the user base grows?
To handle scaling, I plan to:
Implement database indexing on frequently queried fields (e.g., user ID, post ID) to speed up queries. Use cloud storage (S3/Cloudinary) for scalable media storage. Leverage load balancing to distribute traffic across multiple instances of the backend as needed. Explore caching with tools like Redis to reduce database load for frequently accessed data, such as the latest posts in the user feed.
How do you manage the state of your React app, especially when dealing with user data like itineraries and posts?
In my app, I manage the state using React’s built-in useState and useContext for global state management. For user data like itineraries and posts, I store them in context, allowing different components to access the data without unnecessary prop drilling. For example, when a user creates a new post or updates an itinerary, the state is immediately updated in the context, which ensures that the UI reflects these changes without needing to make additional API calls or re-fetch data.
Can you explain how you structure your React components and why you made those decisions?
I adopt a component-based structure in React, breaking the UI into small, reusable components. For example, I have separate components for the post feed, individual posts, itinerary items, and user profiles. I structure the components based on their responsibility: Presentational (e.g., Post), Container components (e.g., Feed that handles data fetching), and shared components (e.g., Button, Modal). This ensures a clean and maintainable codebase.
How do you handle form validation in your React app, particularly for user-generated content like itinerary items and posts?
I handle form validation by using controlled components in React with the useState hook to track input values. Before submitting any form (like for adding a post or itinerary item), I validate the input fields to ensure that required fields are filled, that media files are within size limits, and that the content format is correct (e.g., no empty titles or invalid URLs). If validation fails, I show error messages near the relevant input fields.
How do you handle conditional rendering in your React components, especially when displaying things like loading states, empty states, and user errors?
For conditional rendering, I use standard JavaScript techniques such as ternary operators and && (logical AND) inside JSX to check states like loading, error, or empty. For example, while fetching data from the backend, I render a loading spinner if the data is still being fetched. If there’s an error, I display an error message, and if there’s no content to show, I render an appropriate empty state message (e.g., “No trips to display yet”).
