Project Mars

Project Mars is a frontend web application that provides a captivating journey through the Martian landscape. As a frontend developer, I've used various technologies and techniques to create an engaging and informative experience for users interested in the Red Planet.

Project Structure

The project is structured to ensure clarity and maintainability. It contains two branches for data scraping (the rest of the content remains the same):

• server: Features a traditional client-server architecture where the server serves the scraped data to the frontend. The live demo of it you can find here. Due to Render free tier limitations, the site is turning idle after 15 minutes so you'll need to wait 3-5 minutes until Render rebuilds the site. So if you want to see the demo without waiting, go to link in the About section which uses serverless function.

• serverless: Utilizes a serverless function on Vercel, making data retrieval more efficient.

Technologies Used

Frontend

• React: The frontend of Project Mars is built with React, providing a dynamic and responsive user interface.
• React Router: For client-side routing, enabling seamless navigation within the application.
• Recharts: Utilized for creating interactive charts and visualizations.
• Three.js: To incorporate 3D models and enhance the user experience.
• Vite: As a fast build tool for the frontend development stack.

Data Scraping

• Puppeteer: Used to scrape data from NASA's site and generate API endpoints for the frontend.
• Node.js: Used for backend operations in the server branch.
• Express.js: Utilized in the backend of the server branch for enhanced server-side functionality.
• Serverless Function (Vercel): Used serverless architecture on Vercel in serverless branch which efficiently serves scraped data to the frontend.

Design and Styling

• Tailwind CSS: Employed for styling, ensuring a modern and visually appealing design.
• Figma/Adobe Illustrator: Custom-created and/or edited assets and illustrations to enhance the project's aesthetics.
• Draco3D: Used for compressing 3D models to improve loading times.

Optimization

• Asset Compression: All assets, including 3D models, are compressed for optimal network efficiency.
• Text Compression (gzip): Text-based content is compressed to reduce load times and improve performance.
• React Context: Used for managing and sharing state data across component tree without having to pass props manually at every level of nesting (prop drilling).
• node-cache: Used for caching data for 24 hours in the server branch to minimize redundant data fetching.
• localStorage: Utilized to store weather data for 24 hours in the serverless branch function to enhance network efficiency.

Performance Metrics

The project's performance has been optimized using data from Lighthouse and WebVitals, obtaining excellent results.

Usage

1. Clone the repository: git clone https://github.com/cristianvsirbu/project-mars
2. Navigate to the project directory: cd project-mars
3. Install the dependencies: npm install
4. Start the development server: npm run dev
5. Open the application in your browser: http://localhost:3000

Contribution

Contributions are welcome! If you encounter any issues or have suggestions for improvements, please feel free to submit a pull request or open an issue in the repository. To contribute to the Bluestar Bank App project, follow these steps:

1. Fork the repository and create your branch: git checkout -b my-feature-branch
2. Make your changes and commit them: git commit -m 'Added an awesome feature'
3. Push to your branch: git push origin my-feature-branch
4. Open a pull request in the main repository.😊