🎨 Fancy Slider

Fancy Slider is a cutting-edge presentation tool that transforms how you create, organize, and deliver captivating slideshows. Built with React and TypeScript, this web application combines intuitive design with powerful features to help you craft presentations that leave a lasting impression.

✨ Key Features

🚀 For Users

• 🔄 Intuitive Map Navigation - Explore your presentation through our innovative map-inspired slider interface
• **🖱️ Drag-and-Drop ** - Position elements precisely with our responsive drag-and-drop interface
• 🎭 Rich Media Support - Incorporate text, images, shapes, and more into your presentations
• 🎨 Complete Customization - Personalize every aspect with custom fonts, colors, and layouts
• 📱 Device Versatility - Create and present on any device with our fully responsive design
• 🔄 Effortless Organization - Add, delete, rearrange, and manage slides with simple controls
• **🤝 Many more!

🛠️ Technical Architecture

• ⚛️ React & TypeScript - Type-safe development ensuring robust code quality
• 🔄 Redux Toolkit - Simplified state management with immutable updates
• 📦 Component-Based Design - Modular architecture for maximum code reusability
• 🖱️ Advanced Drag-and-Drop - Powered by react-dnd for pixel-perfect positioning
• 📊 CSS Grid & Flexbox - Sophisticated layouts that adapt to any screen size
• 🔧 Webpack Optimization - Efficient bundling for lightning-fast performance
• 🧪 Comprehensive Testing - Unit and integration tests with Jest and React Testing Library
• ✅ Quality Assurance - ESLint and Prettier integration for consistent code style

🚀 Getting Started

Prerequisites

Before you begin, ensure you have:

• Node.js v14.x or higher
• npm v6.x or higher (or yarn v1.22+)

Installation

# Clone the repository
git clone https://github.com/Shuaa-Technology/fancy-slideshow-maker.git

# Navigate to project directory
cd fancy-slideshow-maker

# Install dependencies
npm install
# or with yarn
yarn install

# Start development server
npm start
# or with yarn
yarn start

Your application will be available at http://localhost:3000.

🔧 Development Scripts

Command	Description
npm start	Run development server
npm test	Execute test suite
npm run build	Create production build
npm run lint	Run code linting
npm run format	Format code with Prettier

🗺️ Project Roadmap

• Core application structure
• Basic slide management
• Drag-and-drop functionality
• Advanced layer system
• Slides Flow builder
• Advanced customization options
• Export/import capabilities
• Collaboration features
• And many more!

🤝 Contributing

We welcome contributions from the community! Here's how to get involved:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to your branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please review our Contributing Guidelines for more details.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Team

• Bilel Chehata - Developer - [email protected]
• Alaeddin Ben Salah - Designer / Developer - [email protected]

🙋 Support & Questions

Having trouble? Check out our FAQ or reach out to our team via email or by opening an issue.

---

Made with ❤️ by Shuaa Technology