Understanding CORS and Why Proxies Help

CORS errors occur when your frontend (running on one port) tries to communicate with your backend (running on another port). Browsers block these requests by default for security reasons. While you could configure CORS headers on your backend, using a proxy during development is often the cleaner solution.

Setting Up Proxies in Modern Frameworks

Vite Configuration

In your vite.config.js, add a proxy configuration:

javascriptexport default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

This routes all /api requests from your frontend to your backend server, eliminating CORS issues during development.

Next.js Configuration

For Next.js, configure the proxy in next.config.js:

javascriptmodule.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:3000/:path*'
      }
    ]
  }
}

The Problem with Common Deployment Practices

Many companies follow this problematic workflow:

1. Run npm run build to create a dist folder

2. Drag and drop the dist folder into the backend directory

3. Use app.use(express.static("dist")) middleware

4. Deploy everything to platforms like DigitalOcean

Why This Approach Is Flawed

This practice creates several maintenance nightmares:

• Manual repetition: Every frontend change requires rebuilding and manually moving files

• Version control mess: Your backend repository gets cluttered with frontend build artifacts

• Deployment coupling: Frontend and backend become unnecessarily dependent

• Rollback complications: Harder to revert changes when frontend and backend are bundled together

Better Deployment Strategies

Instead of the drag-and-drop approach, consider:

Separate Deployments

• Deploy frontend to Vercel, Netlify, or similar platforms

• Deploy backend to Heroku, Railway, or containerized solutions

• Configure proper CORS headers in production

Automated CI/CD

• Use GitHub Actions or similar to automatically build and deploy

• Keep frontend and backend repositories separate

• Implement proper environment variable management

Key Takeaways

The proxy approach works excellently for development, solving CORS issues without backend modifications. However, avoid the temptation of manually copying build files to your backend for production.

Embrace separation of concerns: let your frontend and backend live independently, use proper deployment pipelines, and maintain clean, scalable architecture. Your future self (and your team) will thank you for the reduced complexity and improved maintainability.

Modern development is about automation and best practices – not manual file shuffling. Choose tools and workflows that scale with your project's growth.

If you've ever worked with CSS, you’ve probably encountered situations where your styles didn’t apply the way you expected. Maybe you wrote the perfect rule, but the browser stubbornly ignored it. This often boils down to CSS specificity—a core concept that determines which rules take precedence when multiple styles target the same element.

Don’t worry; it’s not as scary as it sounds. By the end of this post, you’ll know exactly how CSS specificity works and how to wield it like a pro!

What is CSS Specificity?

In simple terms, CSS specificity is a scoring system the browser uses to decide which CSS rule applies to an element when there’s a conflict. It’s like a tiebreaker: when multiple rules apply to the same element, the rule with the higher specificity wins.

How is Specificity Calculated?

Specificity is calculated using a point system based on the types of selectors you use. Here’s the breakdown:

1. Inline styles (e.g., style="color: red;")

   • Score: 1000 points

   • Example: <div style="color: red;">

2. ID selectors (e.g., #header)

   • Score: 100 points

   • Example: #main { color: blue; }

3. Class selectors, attribute selectors, and pseudo-classes (e.g., .button, [type="text"], :hover)

   • Score: 10 points

   • Example: .active { font-weight: bold; }

4. Element selectors and pseudo-elements (e.g., h1, p, ::after)

   • Score: 1 point

   • Example: p { margin: 20px; }

If two rules have the same specificity, the last one in the CSS file takes priority.

Examples of Specificity in Action

Let’s break it down with some examples:

<!-- HTML -->
<div id="main" class="container">
  <p>CSS Specificity Example</p>
</div>

/* CSS */
p {
  color: black; /* 1 point */
}

.container p {
  color: blue; /* 10 + 1 = 11 points */
}

#main p {
  color: red; /* 100 + 1 = 101 points */
}

In this case:

• The p selector has a specificity of 1.

• .container p has a specificity of 11.

• #main p has a specificity of 101.

Result: The paragraph will be red because #main p has the highest specificity.

Common Pitfalls and How to Avoid Them

1. Overusing !important
   While !important can override specificity, it’s often considered bad practice because it makes your code harder to maintain. Use it sparingly.

    p {
      color: black !important;
    }
   

   In this case, the !important rule will win, regardless of specificity.

2. Conflicting Rules
   If your styles are getting overridden, check for higher-specificity selectors or inline styles that might be the culprit.

3. Using Too Many IDs
   IDs have very high specificity, so overusing them can lead to a cascade of specificity wars in your CSS. Favor classes for reusable styles.

How to Keep Specificity in Check

1. Stick to Classes
   Classes provide enough specificity for most use cases and are more reusable than IDs.

2. Keep Your Selectors Simple
   Avoid overly complex selectors like div ul li:first-child a. They’re hard to read, and you might end up unintentionally increasing specificity.

3. Organize Your Stylesheets
   Write your CSS in a way that minimizes conflicts. Group related styles and use a consistent naming convention.

Wrapping It Up

CSS specificity might seem intimidating at first, but once you understand how it works, you’ll gain better control over your styles. Think of it as learning the rules of the road for CSS—once you’ve got them down, you’ll navigate your projects with ease.

Here’s a quick recap:

• Specificity is calculated based on the type of selector.

• Inline styles > IDs > Classes > Elements.

• Avoid !important unless absolutely necessary.

Happy styling! 🎨

Product Name: Modern Salon App

Version: 1.0

Date: January 25, 2025

Prepared By: Yash Shaw

1. Objective

To design and develop a modern-day salon app that provides a seamless and efficient customer experience. The app will enable customers to view and book slots based on real-time availability, manage a live queue system, and check current seating capacity for salons in a specific area.

2. Key Features

2.1 User Features

1. Live Queue Tracking:

   • Displays the real-time queue length for multiple salons.

   • Shows estimated waiting time for each customer at each salon.

2. Slot Booking System:

   • Allows users to view available slots across all salons in the area.

   • Provides an option to pre-book a slot at their preferred salon.

   • Notifies users about upcoming appointments.

3. Seat Availability Display:

   • Real-time display of available seats at each salon.

   • Updates dynamically based on queue activity.

4. Profile Management:

   • Enables users to create and manage profiles.

   • Stores booking history and preferences.

5. Notifications and Reminders:

   • Sends alerts for upcoming bookings.

   • Notifies users of queue status changes.

6. Services and Pricing Information:

   • Displays a list of services offered by each salon.

   • Provides detailed pricing and duration information.

7. Salon Search and Filter:

   • Allows users to search for salons by location, services, ratings, and availability.

   • Filters results based on user preferences.

2.2 Admin Features

1. Queue Management:

   • Manage the live queue, including adding or removing customers.

   • Update seat availability in real-time.

2. Appointment Scheduling:

   • View and manage bookings.

   • Adjust slot availability based on salon schedules.

3. Analytics Dashboard:

   • Provides insights on peak hours, average wait time, and user preferences.

4. Notifications Management:

   • Customize and send alerts to customers.

5. Service Management:

   • Add, edit, or remove services and pricing details.

6. Multi-Salon Management:

   • Allows salon administrators to manage multiple locations from a single dashboard.

3. Target Audience

1. Primary Users:

   • Individuals looking for efficient and hassle-free salon appointments across multiple locations.

2. Salon Staff:

   • Staff members who will manage the queue and appointments via the admin interface.

3. Salon Owners:

   • Owners looking to streamline operations and improve customer satisfaction.

4. Scope

The Modern Salon App will focus on providing end-to-end queue and appointment management for salons within a specific area. It will enable users to explore and book slots at multiple salons based on their preferences. Future expansions may include loyalty programs, in-app payments, and advanced analytics. The app aims to:

• Improve customer experience by minimizing waiting times and offering convenience.

• Streamline operations for salon staff and owners.

• Offer real-time updates and transparent booking processes.

5. Functional Requirements

5.1 User Interface (UI)

1. Intuitive and modern design.

2. Easy-to-use booking flow with minimal clicks.

3. Real-time queue and seat display for multiple salons on the home screen.

5.2 Backend Features

1. Real-time database to track queue and seat availability for all salons.

2. Secure user authentication and data management.

3. Integration with notification services (e.g., SMS, push notifications).

4. Multi-salon data synchronization.

5.3 Performance Requirements

1. Load real-time data updates within 2 seconds.

2. Handle up to 500 concurrent users.

6. Use Cases/User Stories

6.1 User Stories

1. As a Customer, I want to search for salons near me so that I can choose one based on location and services.

2. As a Customer, I want to check the live queue status at multiple salons so that I can decide where to go.

3. As a Customer, I want to pre-book a slot at my preferred salon so that I can avoid waiting in the queue.

4. As a Customer, I want to receive notifications about my booking and queue status so that I can plan my visit accordingly.

5. As a Customer, I want to view the list of services and prices offered by each salon so that I can choose the best option for my needs.

6. As an Admin, I want to update the queue and seat availability in real-time so that customers have accurate information.

7. As an Admin, I want to manage bookings and make adjustments to the schedule so that I can handle peak hours effectively.

8. As an Admin, I want to send custom notifications to users so that they are informed about changes in their appointments.

9. As a Salon Owner, I want to view analytics on customer behavior and peak hours so that I can improve operations.

10. As a Salon Owner, I want to manage multiple salon locations from a single dashboard so that I can streamline management.

7. Non-Functional Requirements

1. Security:

   • Ensure secure data storage and transmission using encryption.

2. Scalability:

   • Design the app to support an increasing number of salons and users.

3. Compatibility:

   • Support Android and iOS platforms.

8. Technical Stack

1. Frontend: React Native or Flutter.

2. Backend: Node.js with Express.

3. Database: Firebase Realtime Database or MongoDB.

4. Notifications: Firebase Cloud Messaging (FCM) or Twilio.

5. Hosting: AWS or Google Cloud Platform.

9. User Flow

9.1 User App

1. Login/Sign-Up:

   • Users create or log into their profiles.

2. Home Screen:

   • Displays live queue, available seats, and booking options for multiple salons.

3. Salon Search and Filter:

   • User searches for salons by location, services, or ratings.

4. Booking a Slot:

   • User selects a salon, chooses a time slot, and confirms the booking.

5. Queue Updates:

   • App sends real-time updates on queue status.

9.2 Admin App

1. Login:

   • Admin logs into the dashboard.

2. Queue Management:

   • Admin monitors and updates the live queue.

3. Appointment Management:

   • Admin views and modifies bookings.

4. Multi-Salon Management:

   • Admin manages operations for multiple locations.

10. Success Metrics

1. Average waiting time reduced by 30%.

2. 90% user satisfaction with queue and booking system.

3. Increase in salon appointments by 20% within 6 months.

4. 80% of salons in the target area onboarded within the first year.

11. Timeline

1. Week 1-2: Requirement gathering and design finalization.

2. Week 3-6: Development of the frontend and backend.

3. Week 7-8: Testing and bug fixing.

4. Week 9: Deployment and launch.

12. Open Questions

1. Should there be an option for in-app payments?

2. What are the specific customization requirements for queue visuals?

3. Is multilingual support necessary for the app?

4. Should the app offer salon-specific promotions and discounts?

What is DNS and Why is it Important?

DNS (Domain Name System) is a system that converts simple website names (like example.com) into computer-readable IP addresses (like 192.168.1.1). Without DNS, using the internet would be very difficult. Imagine if you had to remember long numbers for every website you visit!

Why is DNS Important?

• Easy Browsing: You can use simple names instead of complex numbers.

• Handles Huge Traffic: Manages billions of devices on the internet.

• Connects Devices: Ensures proper data flow between users and websites.

DNS Hierarchy: From Root to Authoritative Servers

The DNS system is like a ladder with different levels. Each level plays an important role in finding the correct IP address. Here’s how it works:

1. Root DNS Servers: The top level that starts the search for the domain’s IP address.

2. TLD Servers: Handle domains under specific extensions like .com, .org, or .in.

3. Authoritative Name Servers: Store the final DNS records and give the IP address when asked.

How a DNS Query Works

Here’s what happens step by step when you type example.com into your browser:

1. Your Device:

   • The browser checks its memory (cache) for the IP address.

   • If it’s not found, it contacts the local DNS resolver.

2. Local DNS Resolver:

   • Sends a query to the Root DNS Server.

3. Root DNS Server:

   • Points to the right TLD Server (like .com).

4. TLD Server:

   • Forwards the query to the Authoritative Name Server.

5. Authoritative Name Server:

   • Gives the IP address of the website.

6. Local DNS Resolver:

   • Sends the IP address back to the browser.

   • The browser uses this to load the website.

Illustration 1: How a DNS Query Works

Conclusion

DNS is like an invisible helper that makes the internet easy to use. Without it, browsing websites would be much harder. From translating names into numbers to ensuring smooth communication between devices, DNS plays an important role in our daily internet usage.

Next time you visit a website, remember the amazing journey your query takes, and thank DNS for making it happen!

The Internet: A Big Network of Connections

The internet is like a giant system of roads where information travels. It connects computers, phones, and other devices across the world. Here are the key parts:

1. Your Device: It all starts with your phone, laptop, or tablet.

2. Internet Service Provider (ISP): Your device connects to the internet through an ISP.

3. Routers and Switches: These act like traffic signals, guiding the data to the right place.

4. DNS (Domain Name System): Converts website names (like hashnode.com) into numbers (IP addresses) that computers can understand.

5. Servers: These store the information you see on websites, like text, images, and videos.

   Illustration 1: A basic web request

   

How Your Data Travels: From Browser to Server

Let’s see what happens when you click a link to open a webpage:

1. Clicking the Link

Your browser sends a request to load the webpage. But first, it needs the website’s IP address. This is where the DNS comes in.

2. Finding the IP Address (DNS Lookup)

Your browser asks the DNS server to find the IP address for the website. This involves:

• Checking the Local DNS Resolver.

• Asking the Root DNS Server for the next step.

• Going to the Top-Level Domain (TLD) Server, like .com or .org.

• Finally, reaching the Authoritative Name Server, which provides the IP address.

3. Sending the Request

The IP address goes back to the browser, which sends the request to the website’s hosting server (like GoDaddy or Hostinger).

4. Getting the Response

The server sends the required data (text, images, etc.) back to your device in small packets.

5. Showing the Webpage

Your browser puts these packets together and shows the webpage on your screen.

Illustration 2: Detailed DNS Resolution

Important Parts of the Internet

1. IP Addresses

Every device and website has a unique IP address, like a digital address.

2. Routers and ISPs

Routers guide data, and ISPs connect your device to the internet.

3. DNS

The DNS makes browsing easy by using website names instead of complicated IP addresses.

4. Data Packets

Information travels in small pieces called packets. Each packet knows where it’s going and where it came from.

Final Thoughts

The internet is an amazing system that makes life easier in so many ways. From watching videos to chatting with friends, it all happens because of this well-organized network. By learning how it works, you can appreciate it even more.

Next time you open a website, think about the journey your data takes—it’s fascinating and worth understanding.