https://github.com/shahriyar-rahim/web-code-agency-rahim
A react SPA website to demonstrate how authentication routing designing works.
https://github.com/shahriyar-rahim/web-code-agency-rahim
daisyui-react firebase-auth javascript react reacticons tailwindcssdashboard vite
Last synced: 7 months ago
JSON representation
A react SPA website to demonstrate how authentication routing designing works.
- Host: GitHub
- URL: https://github.com/shahriyar-rahim/web-code-agency-rahim
- Owner: Shahriyar-Rahim
- License: mit
- Created: 2025-07-07T06:03:09.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-07-07T07:23:44.000Z (8 months ago)
- Last Synced: 2025-07-07T07:28:16.417Z (8 months ago)
- Topics: daisyui-react, firebase-auth, javascript, react, reacticons, tailwindcssdashboard, vite
- Language: JavaScript
- Homepage: https://web-code-agency-rahim.vercel.app/
- Size: 1.4 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Project Title: Web Code Agency - Authentication & Routing Demo
## Description
This is a Single Page Application (SPA) named "Web Code Agency," designed to demonstrate fundamental web development concepts including user authentication (sign in/out), client-side routing, and basic template design. It features a static dashboard accessible after sign-in, providing a clear example of how to implement authenticated routes and a responsive user interface.
## Live Demo
Explore the live application and its features here: https://web-code-agency-rahim.vercel.app/
## Features
User Authentication:
**Sign In:** Users can sign in (currently with dummy credentials or simulated authentication).
**Sign Out:** Securely sign out of the application.
**Protected Routes:** Access to the dashboard is restricted and requires a user to be signed in.
**Static Dashboard:** A simple dashboard view to showcase content accessible only after authentication.
**Client-Side Routing:** Seamless navigation between different parts of the application without full page reloads.
**Responsive Design:** Ensures a consistent and appealing user experience across various devices.
**Learning Resource:** Serves as a practical example for understanding authentication flow and SPA architecture.
## Technologies Used
This project leverages a modern stack for building efficient and dynamic SPAs:
**React.js:** The core JavaScript library used for building interactive user interfaces and managing component-based architecture.
**React Router (or similar for client-side routing):** For handling navigation and creating protected routes within the SPA.
**Vite:** A fast build tool that provides a rapid and optimized development environment.
**Tailwind CSS:** A utility-first CSS framework for quickly and flexibly styling the application's components.
## Installation and Local Setup
To set up and run this project on your local machine, **follow these steps:**
1. **Clone the repository:**
```Bash
git clone https://github.com/Shahriyar-Rahim/web-code-agency-rahim.git
cd web-code-agency-rahim
```
2. **Install dependencies:**
```Bash
npm install
# or
yarn install
```
3. **Run the development server:**
```Bash
npm run dev
# or
yarn dev
```
The application will typically open in your web browser at http://localhost:5173 (or a similar port provided by Vite).
## Usage
Once the application is running:
Navigate to the Sign In page to access the application. (If specific credentials aren't mentioned, assume any input might work for demo purposes or check the code for dummy values).
Upon successful sign-in, you'll be redirected to the Dashboard.
Explore the navigation to switch between different sections.
Use the Sign Out option to log out and return to the public routes.
## Contributing
Contributions, issues, and feature requests are welcome! If you'd like to improve this project or add new functionalities, feel free to fork the repository and submit a pull request.
1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'feat: Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request
## License
This project is open-source and distributed under the MIT License. See the LICENSE file in the repository for full details.
## Contact
Shahriyar Rahim
*Project Link:* https://github.com/Shahriyar-Rahim/web-code-agency-rahim