Thank you for checking out this coding challenge from Frontend Mentor. This dictionary web app is built as a solution to the challenge, showcasing real-world coding skills by creating a functional, responsive, and accessible web application.
- Overview
- Features
- Advanced Theming with TailwindCSS
- Custom Hooks
- My Experience
- Local Installation and Setup
- Technologies Used
- New Component Generator
- Author
- Acknowledgments
- License
This dictionary web app is developed to be a user-friendly and responsive tool for word searches and definitions, leveraging the Free Dictionary API.
The goal was to build a dictionary app that adheres to Frontend Mentor's design challenge criteria. This included ensuring a clean and responsive design, accessibility compliance, and effective integration of external APIs.
Check out the Dictionary Web App in action: View Live
- Word search functionality with input validation.
- Displaying definitions, synonyms, and audio pronunciations.
- Responsive layout for various devices.
- Dark and light mode switcher.
- Dynamic font switching.
- Enhanced keyboard navigation with visible outlines in the primary color, ensuring a better experience for non-mouse users.
- Customized scroll bar styling with the primary theme color for a cohesive visual experience across different browsers and platforms.
In this project, I've implemented an advanced theming system using CSS variables integrated with TailwindCSS. This setup enables a dynamic switch between light and dark modes, showcasing the versatility of TailwindCSS when combined with native CSS features. The theming is not only responsive but also adapts to user preferences, providing an engaging and accessible user experience.
The development of several custom hooks and components was pivotal in enhancing the functionality and efficiency of the codebase. Key implementations include:
-
useSearchWord: Manages word search functionality and API interactions, showcasing the use of asynchronous operations within React for dynamic data fetching.
-
useFont: Demonstrates the dynamic management of font styles using React's Context API, enabling consistent styling across the application.
-
useTheme: Controls the theme settings of the app, illustrating effective state management and context usage in React.
-
Other notable implementations include FontProvider, WordDisplay, NotFound, LoadingSpinner, ThemeProvider and ThemeSwitcher. ach playing a crucial role in enhancing the app's functionality and user experience.
This project marked my second venture with React and TypeScript and my first integration of Tailwind CSS into this mix. The experience offered a new perspective on building responsive and visually appealing interfaces. Learning to use Tailwind CSS alongside React's component structure and TypeScript's type safety was enlightening. The project also introduced me to using the useSWR hook for efficient data fetching.
Before you begin, ensure you have the following installed:
- Node.js (20.10.0 or later)
pnpmfor efficient package management
Follow these steps to set up and run the project locally using pnpm:
-
Clone the Repository: Start by cloning the repository to your local machine. Replace
new-directory-namewith the desired name for your project directory. This command clones the repository into a new directory namednew-directory-namein your current location.git clone https://github.com/ucod3/dictionary-web-app-react-ts.git
-
Install pnpm: If you don't already have pnpm, you can install it globally using npm. This is only needed if you haven't installed pnpm before:
npm install -g pnpm
-
Install Dependencies: Navigate to the project directory and use pnpm to install the dependencies:
cd [project-directory] pnpm install -
Start the Development Server: To run the project locally, start the development server with pnpm:
pnpm run dev
-
Access the Project: The project will be available at
http://localhost:5173or on another port if this one is in use. Check the terminal output to confirm the port. Open this URL in your browser to view and interact with your project.
This project utilizes a blend of technologies, each selected for its specific benefits:
-
React: Chosen for its component-based architecture, enabling the development of a dynamic and interactive user interface.
-
TypeScript: Provides type safety, enhancing code quality and developer experience, especially useful in a component-based architecture like React.
-
Tailwind CSS: A utility-first CSS framework used for its efficiency in building custom designs rapidly, greatly improving the app's responsiveness and style flexibility.
-
Vite: Selected for its fast build times and efficient development server, which enhances the overall development experience.
-
ESLint & Prettier: These tools ensure consistent code formatting and quality, aligning with best coding practices.
-
useSWR : A React hook utilized for its simplicity and efficiency in data fetching, offering a streamlined way to retrieve and manage external data.
-
API: The Free Dictionary API provides comprehensive dictionary data, crucial for the app's core functionality.
This project includes a script for generating new components. You can run this script using the following command:
To create a new TypeScript component named 'MyComponent':
pnpm run new-component MyComponentThis will create a folder name MyComponent and the following files within it: MyComponent.tsx index.ts
Special thanks to Frontend Mentor for this challenge. I also want to acknowledge the following resources that were instrumental in the development of this project:
-
Boilerplate: ucod3/dictionary-web-app-react-ts.
-
new-component script: Josh W Comeau's new-component.
This project is licensed under the MIT License - see the LICENSE.MD file for details.