Simple-Mern-Stack-With-Redux-Typescript

Games Info Zone

Games Info Zone is a full-stack MERN (MongoDB, Express.js, React.js, Node.js) application built using TypeScript. The app utilizes Redux for state management and Zod for validation. It allows users to log in, view character data, and access detailed information by clicking on "Read More." The data is fetched from MongoDB Cloud.

Table of Contents

• Features
• Technologies Used
• Installation
• Usage
• Screenshots
• Contributing
• License

Features

• User authentication and authorization handled with Redux tools
• Display a dashboard with character data
• View detailed information about each character by clicking on "Read More"
• Data fetched from MongoDB Cloud
• TypeScript for improved code structure and type safety
• Zod for data validation

Technologies Used

• MongoDB: Cloud database for storing character data
• Express.js: Backend framework for handling API requests
• React.js: Frontend library for building user interfaces
• Node.js: Server-side JavaScript runtime
• TypeScript: Adds static typing to JavaScript for better code quality
• Redux: State management for handling login/logout states
• Zod: Schema declaration and validation for ensuring data integrity

Installation

Backend

1. Navigate to the backend folder:

   cd backend

2. Install backend dependencies:

   npm install

3. Set up MongoDB Cloud credentials and update configuration files.

4. Run the backend server:

   npm start

Frontend

1. Navigate to the frontend folder:

   cd frontend

2. Install frontend dependencies:

   npm install

3. Run the frontend application:

   npm start

Usage

1. Register or log in to access the dashboard.
2. Explore character data on the dashboard.
3. Click on "Read More" to view detailed information about a specific character.

Screenshots

Registration Page

Login Page

Zod Validation in Registration Page

Redux states prior to Login

Redux states afer Login

Dashboard

Know More feature in Dashboard

Logout states in redux

Contributing

Contributions are welcome! Please follow the contribution guidelines.

License

This project is licensed under the MIT License.

This template separates the backend and frontend installation steps and includes specific instructions for each part. Adjust the paths, commands, and details based on your actual project structure.