Server-Side Events (SSE) Car Tracking Example

This project demonstrates the implementation of Server-Side Events (SSE) for real-time updates within a monorepo using NX. The example focuses on car tracking.

Features

• Car Tracking: Simulates real-time tracking of a car's location using SSE.
• Chakra UI Integration: Utilizes Chakra UI for a clean and aesthetically pleasing user interface.
• Google Maps Integration: Displays the car's location on a Google Map component.

Project Structure

• apps/sse-example: React application source code.
  • components: React components used in the application.
  • App.js: Main application component.
  • index.js: Entry point for the React application.
• apps/backend: Server-side code for handling SSE events.
• libs: Shared libraries, configurations, and utilities.

Installation

1. Clone the Repository:

   git clone https://github.com/your-username/sse-example.git
   cd sse-example

2. Install Dependencies:

   npm install

3. [Optional] Set up Environment Variables:

   • This step is optional, only for remove the "for development purposes" watermark from google maps

   • Create a .env file at the project root.

   • Add your Google Maps API key:

     REACT_APP_GOOGLE_MAPS_API_KEY=YOUR_GOOGLE_MAPS_API_KEY
     

4. Run the Application:

   npm run web

   This starts the development server for the React application. You can access the application at http://localhost:3000.

5. Run the Backend:

   npm run backend

   This starts the server-side code for handling SSE events.

Usage

• Open the application in your web browser.
• Click the "Place Order" button to simulate a car tracking event.
• The car's location will be updated in real-time on the Google Map.

Technologies Used

• React
• Chakra UI
• Google Maps API
• Server-Side Events (SSE)
• NX (Monorepo)

Scripts

• npm run web: Start the React application.
• npm run backend: Start the server-side code for SSE events.

Contributing

Feel free to contribute to the project by opening issues or pull requests. Your feedback and contributions are welcome!

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• This project is built using NX for monorepo management.

SseExample

✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨

Start the app

To start the development server run nx serve sse-example. Open your browser and navigate to http://localhost:4200/. Happy coding!

Generate code

If you happen to use Nx plugins, you can leverage code generators that might come with it.

Run nx list to get a list of available plugins and whether they have generators. Then run nx list <plugin-name> to see what generators are available.

Learn more about Nx generators on the docs.

Running tasks

To execute tasks with Nx use the following syntax:

nx <target> <project> <...options>

You can also run multiple targets:

nx run-many -t <target1> <target2>

..or add -p to filter specific projects

nx run-many -t <target1> <target2> -p <proj1> <proj2>

Targets can be defined in the package.json or projects.json. Learn more in the docs.

Want better Editor Integration?

Have a look at the Nx Console extensions. It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.

Ready to deploy?

Just run nx build demoapp to build the application. The build artifacts will be stored in the dist/ directory, ready to be deployed.

Set up CI!

Nx comes with local caching already built-in (check your nx.json). On CI you might want to go a step further.

• Set up remote caching
• Set up task distribution across multiple machines
• Learn more how to setup CI

Connect with us!

• Join the community
• Subscribe to the Nx Youtube Channel
• Follow us on Twitter