Star Wars Wiki

Explore details about your beloved Star Wars characters, vehicles and locations! Dive into nearly 1700 pages of information. Connect with fellow fans, share your favorites, and showcase them to the Star Wars community!

Deployment

Star Wars Wiki - React web app using Vite and SCSS styling

Setup

Star Wars Wiki uses the package manager yarn.

1. Clone the repository with git clone https://github.com/Cactooz/StarWarsWiki.git
2. Set up a Firebase Realtime database and upload the data from /data/apiHash.json under the database path /apiHash.
3. Go into the project folder with cd starwarswiki
4. Copy [.env.example] to .env with cp .env.example .env
5. Fill in your Firebase credentials in the new .env file
6. Set up project with yarn install
7. Run project with yarn dev or yarn dev --host to test on mobile

APIs

• Star Wars Database
• SWAPI
• Firebase for storing user data

Features

• The Star Wars Database API does not have a built-in search function. The search function for this website is built in a way that uses the autocomplete suggestions based on the text input.
• SWAPI contains more specific data about some pages. When available, the data from the APIs have been mashed up.
• Personal profile with friend system.
• Feedback on user actions and system status.
• User should feel in control as there are multiple ways to navigate the site.
• Dynamic elements for nicer UI.
• Carousel on the home page, showcasing popular pages.
• Responsive design for different screen sizes.
• URL routing with possible link sharing

Third-party Components

• React loader spinner for system status
• Search bar to search the database
• Burger menu to make navbar work on mobile
• Toastify for feedback messages
• Starry Sky as dynamic background
• Embla Carousel to showcase popular pages

Folder Structure

Short descriptions of the file structure can be found in the table below:

Folder	Description
/.vscode	Visual Studio Code config
/data	Hashing data for the APIs
/starwarswiki	Contains all source code
/starwarswiki/assets	Contains fonts, images etc
./assets/images	Contains images, favicon etc
/starwarswiki/src	Source folder
./src/components	Contains components
./src/data	Contains autocomplete data, for searching
./src/models	Contains the application state and persistence
./src/presenters	Contains presenters
./src/style	SCSS files
./src/views	Contains views
/utils	Scripts for scraping and generating files

Team

• Hugo
• Pontus
• Rikard
• William

Copyright Notice

The content presented on the website, including but not limited to information, images, and references related to the Star Wars universe, is the exclusive property of Lucasfilm Ltd. All intellectual property rights, including copyrights and trademarks, are owned by Lucasfilm Ltd. This platform and website is not affiliated with, endorsed by, or sponsored by Lucasfilm Ltd. The use of Star Wars-related content is solely for informational and educational purposes. No copyright infringement intended. Star Wars is a registered trademark of Lucasfilm Ltd. All rights reserved.