https://github.com/iwmartnz/pokebase
Frontend development technical assessment.
https://github.com/iwmartnz/pokebase
css html5 reactjs technical-coding-interview
Last synced: about 2 months ago
JSON representation
Frontend development technical assessment.
- Host: GitHub
- URL: https://github.com/iwmartnz/pokebase
- Owner: iwmartnz
- Created: 2024-06-05T22:25:08.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-06T13:45:27.000Z (almost 2 years ago)
- Last Synced: 2025-03-25T14:45:36.664Z (about 1 year ago)
- Topics: css, html5, reactjs, technical-coding-interview
- Language: TypeScript
- Homepage: https://iwmartnz.github.io/pokebase/
- Size: 247 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend development technical assessment.
## Objective
Build a web application using PokeAPI that showcases frontend and backend development skills.
App hosted on github pages.
## Tools used
- Vite
- React
- Github pages
## Deployment instructions
Step 1: Initialize Git Repository
Run the following commands to initialize a git repository in your Vite app and push your existing code to a remote repository on GitHub.
```js
$ git init
$ git add .
$ git commit -m "initial-commit"
$ git branch -M main
$ git remote add origin http://github.com/{username}/{repo-name}.git
$ git push -u origin main
```
Step 2: Update vite.config.js
Add the base URL in this file by setting the base as “/{repo-name}/”. For example, if your repository’s name is book-landing-page then set the base like this:
```js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: '/book-landing-page/',
});
```
Step 3: Install gh-pages
Install gh-pages package as a dev dependency.
```js
npm install gh-pages --save-dev
```
Step 4: Update package.json
Update package.json with the following predeploy and deploy scripts.
```js
"scripts": {
"predeploy" : "npm run build",
"deploy" : "gh-pages -d dist",
...
}
```
Add the complete website URL by setting homepage in package.json e.g
```js
"homepage": "https://iwmartnz.github.io/pokebase/"
```
Thus, your updated package.json will look like this: e.g
```js
{
"name": "poke",
"private": true,
"version": "0.0.0",
"homepage": "https://iwmartnz.github.io/pokebase/",
"type": "module",
"scripts": {
"predeploy" : "npm run build",
"deploy" : "gh-pages -d dist",
"dev": "vite",
"build": "vite build",
}
}
```
Step 5: Run Deploy
Run the final command:
```js
npm run deploy
```
And you’re done!
## Instructions on how to run the app locally
Step 1: On GitHub.com, navigate to the main page of the repository.
Step 2: Above the list of files, click Code.
Step 3: Copy the URL for the repository.
- To clone the repository using HTTPS, click under "HTTPS" .
- To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click SSH.
- To clone a repository using GitHub CLI, click GitHub CLI.
Step 4: Open Terminal.
Step 5: Change the current working directory to the location where you want the cloned directory.
Step 6: Type git clone, and then paste the URL you copied earlier.
```js
git clone https://github.com/iwmartnz/pokebase.git
```
Step 7: Install dependencies
Type the following command in the terminal to install the necessary dependencies:
```js
npm install
```
Press Enter to execute the command. npm will then download and install all the dependencies listed in the project’s `package.json` file.
Step 8: Start the Project
Once all the dependencies are installed, you’re ready to start the project. In many Node.js projects, this is done by running a command like `npm start` or `node app.js`.
Type the appropriate command in the terminal and press Enter to start the project:
```js
npm start
```
This command will execute the script defined in the `”start”` field of the `scripts` object in the `package.json` file.