Guest Book

Guest Book is a full-stack React.js application developed in September 2024 to create an interactive platform where users can log in, customize their profiles, and manage personal details. The app features authentication routes (/login and /register), a home page with a profile display, and options to upload a photo, edit a bio, and log out. Styled with Tailwind CSS, it offers a clean, responsive interface, showcasing skills in user authentication, state management, and dynamic UI components.

Guest Book

Technology Stack

ReactReact
Tailwind CSSTailwind CSS
JavaScriptJavaScript
FirebaseFirebase

Authentication Routes

Unauthenticated users accessing the root route (/) are redirected to the /login route for secure access.

The login page provides an option to navigate to the registration page, with seamless navigation back to login from registration.

  • Protected routes for authenticated users
  • Smooth navigation between login and registration
  • Responsive form layouts for user input
  • Secure redirection for unauthorized access
Authentication Routes image 1
Authentication Routes image 2

Home Route: User Profile

After successful login, users land on the home route (/) displaying a profile circle showing the first letter of their name if no photo is set.

The profile includes an upload photo icon, delete photo icon, a bio field with an edit bio icon, and a logout button below.

  • Dynamic profile circle with initial letter fallback
  • Interactive photo upload and delete functionality
  • Editable bio field with intuitive controls
  • Logout button for secure session termination
Home Route: User Profile image 1

Users can upload a profile photo and update their bio, with changes reflected instantly in the profile display.

  • Real-time profile photo updates
  • Dynamic bio editing with instant UI refresh
  • Responsive design for profile elements
  • User-friendly feedback for profile changes
Home Route: User Profile image 1

Logout Functionality

Clicking the logout button terminates the session and redirects the user back to the /login route, ensuring secure access control.

  • Secure session termination
  • Seamless redirection to login page
  • Clear user feedback on logout
  • Consistent navigation flow
Logout Functionality image 1

Technical Implementation

Built with React.js for efficient component-based architecture and dynamic user interactions.

Utilizes Tailwind CSS for responsive, utility-first styling, ensuring a consistent and modern interface across devices.

  • React Router for authentication and navigation
  • React hooks for state management and side effects
  • Tailwind CSS for rapid and responsive styling
  • Clean and modular code structure