A React + Vite web application designed for fans of J.R.R. Tolkien. This platform serves as a repository of Tolkien-related facts, curiosities, and resources, offering a dynamic and immersive experience for enthusiasts of Middle-earth. It's an application made from a fan to fans. It is under work and is one of my first works in react.
- Interactive Navigation: Hover effects that dynamically update the background imagery for an immersive Tolkien experience.
- Curated Pages: Explore distinct sections for:
- Books: A comprehensive list of Tolkien's literary works sourced from a utility file.
- Movies: Insights and details about movie adaptations.
- Tolkien: Facts and curiosities about the man behind Middle-earth.
- Appendix: Maps and additional lore resources.
- User Authentication: A login page for personalized user interactions.
- Frontend Framework: React
- Module Bundler: Vite
- Routing: React Router
- Styling: CSS (custom styles integrated for a Tolkien-inspired theme)
-
Clone the repository:
git clone https://github.com/DGwebdes/tolkienhub.git cd tolkien-fan-repo
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open the application in your browser:
http://localhost:5173
- Launch the application and navigate through various sections using the header.
- Hover over the navigation links to see the dynamic background updates.
- Explore the Books section, populated with data from the
utils/bookList.js
file, to read summaries of Tolkien's works. - Dive into Tolkien's world by exploring Movies, Appendix, and more.
src/
├── components/
│ ├── Header.jsx
│ └── Main.jsx
├── pages/
│ ├── Books.jsx
│ ├── Movies.jsx
│ ├── Tolkien.jsx
│ ├── Appendix.jsx
│ └── Login/
│ └── Login.jsx
├── utils/
│ ├── movieList.js
│ ├── tolkien.js
│ ├── appendix.js
│ └── bookList.js
├── App.jsx
├── main.jsx
├── assets/
│ ├── bg-lotr.png
│ ├── bookz.jpg
│ ├── movies.jpg
│ ├── tolkin.jpg
│ ├── map.jpg
├── styles/ (optional custom styles directory)
- Search Functionality: Allow users to search for specific Tolkien-related content.
- Favorites Feature: Enable users to bookmark their favorite books, movies, or lore.
- Dark Mode: Provide a toggle for dark/light themes.
- API Integration: Fetch additional Tolkien-related data from external APIs.
- Expanded Book Data: Use the
/utils
folder to include richer data, such as publication dates and character highlights.
We welcome contributions to make this repository even better! Please follow these steps:
-
Fork the repository.
-
Create a feature branch:
git checkout -b feature/your-feature-name
-
Commit your changes:
git commit -m "Add your feature"
-
Push the branch:
git push origin feature/your-feature-name
-
Open a pull request.
This project is licensed under the MIT License.