SuiSteps

A full-stack TypeScript application for tracking steps with Sui blockchain integration, featuring a React frontend and Express backend connected to MySQL database.

       

       

🚀 Features

• React Frontend with TypeScript
• Express Backend with TypeScript
• MySQL Database integration
• Sui Blockchain integration for step tracking
• Device Management for tracking step data
• User Authentication and role-based access
• Modern UI with responsive design
• Error Handling and loading states
• API Integration with Axios

📋 Prerequisites

Before running this application, make sure you have:

• Node.js (v16 or higher)
• MySQL Server (v8.0 or higher)
• npm or yarn package manager

🛠️ Installation

1. Clone or navigate to the project directory:

   cd suisteps

2. Install all dependencies:

   npm run install-all

3. Set up MySQL database:

   • Start your MySQL server
   • Run the setup script:

   mysql -u root -p < database/setup.sql

4. Configure environment variables:

   • Copy the example environment file:

   cd server
   cp .env.example .env

   • Edit .env file with your MySQL credentials:

   DB_HOST=localhost
   DB_USER=root
   DB_PASSWORD=your_mysql_password
   DB_NAME=react_mysql_app
   DB_PORT=3306
   PORT=5000

🏃‍♂️ Running the Application

Development Mode (Both Frontend & Backend)

npm run dev

This will start:

• Backend server on http://localhost:5000
• Frontend development server on http://localhost:3000

Individual Services

Backend only:

npm run server

Frontend only:

npm run client

📁 Project Structure

suisteps/
├── client/                 # React TypeScript frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── services/       # API service layer
│   │   ├── types.ts        # TypeScript interfaces
│   │   ├── App.tsx         # Main App component
│   │   └── App.css         # Styles
│   └── package.json
├── server/                 # Express TypeScript backend
│   ├── src/
│   │   ├── routes/         # API routes
│   │   ├── database.ts     # Database connection
│   │   ├── types.ts        # TypeScript interfaces
│   │   └── server.ts       # Express server
│   ├── .env.example        # Environment variables template
│   └── package.json
├── database/
│   └── setup.sql          # Database schema and sample data
└── package.json           # Root package.json

🔧 Technologies Used

Frontend

• React 18
• TypeScript
• Axios for API calls
• CSS3 with modern styling

Backend

• Express.js
• TypeScript
• MySQL2 for database connection
• CORS for cross-origin requests
• dotenv for environment variables

Database

• MySQL 8.0+

📝 License

MIT License - feel free to use this project for learning and development.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

---

Happy coding! 🎉