Welcome! This is a Star Wars Wikia built with React + Vite. The app includes state management using Context API, user authentication with Firebase and components made with Storybook. The page is based on the official Star Wars site. Hope you like it.
- React
- Vite
- Typescript
- Firebase
- Storybook
- Tailwind CSS
- React Router
- Vitest
- Reusable components
- Context API for state management
- Pages
- Client info form
- Routes and pages
- User authentication
- Placeholder for images not working
- Unit testing
To run this project, you need to configure environment variables. Follow these steps:
- Copy the
.env.examplefile and rename it to.env:
cp .env.example .env- Open the .env file and replace your_api_key and others with your own API key from Firebase. You can create a free auth project here: Firebase
VITE_API_KEY:your_api_key
VITE_AUTH_DOMAIN:your_auth_domain_key
...- After setting up the .env file, you’ll be ready to run the project.
- Node.js and npm installed on your system. You can download them from nodejs.org.
✔️ Step 1: Clone the repository to your local machine (replace your-username with your GitHub username):
git clone https://github.com/your-username/react-context-api-example.git
cd react-context-api-example✔️ Step 2: Install the required dependencies:
npm install✔️ Step 3: Start the development server using Vite:
npm run devOnce the server is running, you'll see a URL similar to:
> Local: http://localhost:5173/✔️ Step 4: Run storybook:
npm run storybook✔️ Step 5: For storybook to run properly with TailwindCss, run this:
npm run watch:cssIf you use Windows, you can run this script to run the project:
npm run start:allIt will run vite, storybook and compilation scripts at the same time.
If you want to contribute or report issues, feel free to create an issue or submit a pull request.