A modern and interactive web application for training visual perception, attention, and reading speed using Schulte tables. The project is built with React, TailwindCSS, and heroui, with a focus on clean design, performance and usability.
A Schulte table is a simple grid of randomly arranged numbers (commonly 1–25). The task is to find the numbers in ascending order as quickly as possible.
It’s a widely used method to:
- Improve concentration and focus
- Develop peripheral vision
- Increase reading speed and eye movement efficiency
Originally developed for psychology and pedagogy, it is widely used to improve peripheral vision, concentration, speed of visual perception, and reading skills.
- Random table generation on each session
- Timer to measure performance
- Restart button for quick retries
- Responsive design for desktop and mobile
- Clean and modular codebase for easy extension
- React 19 – UI framework
- Vite – development and build tool
- TailwindCSS 4 – styling
- HeroUI – prebuilt components
- EmailJS – email service
Clone the repository:
git clone git@github.com:dantudev/schulte-table-web-app.git
cd schulte-table-web-app
Install dependencies:
npm install
Run the development server:
npm run dev
Build for production:
npm run build
Set up a .env file in the project root with your EmailJS credentials:
VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id
VITE_EMAILJS_PUBLIC_KEY=your_public_key
Note: Keep your
.envfile out of version control for security.
- Core Schulte table development
- Navbar + Contact & About functionalities
- Timer and restart table functionalities
- Correct number / Wrong number clicked sounds
- Multilanguage compatibility and selector
- Light mode + toggle theme option
- Reversed table mode
- Built with Vite for fast development and optimized production build.
- Tested on latest Chrome, Firefox, and Edge.
- Mobile-friendly responsive layout.
If you have any questions, issues, or suggestions regarding this project, please don't hesitate to reach out:
- You can always open a new issue or discussion in this repository.
- For contact or special support/questions... you can contact a repository administrator:
Thank you for your interest and support!