Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mohamadreza-rohani--assignment-PR #23

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

mohamadreza-rohani--assignment-PR #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4fe6887
setting up react with webpack
r3z4r Aug 5, 2023
3197b50
Wizard, steps and validations
r3z4r Aug 5, 2023
a28ed33
routs and createUser call
r3z4r Aug 6, 2023
5c10892
minor fixes
r3z4r Aug 6, 2023
a6f01a8
gh-pages set
r3z4r Aug 6, 2023
d848844
resolve gh-pages issue with router
r3z4r Aug 6, 2023
9872e89
Revert "resolve gh-pages issue with router"
r3z4r Aug 6, 2023
2cfd305
updated README.md
r3z4r Aug 6, 2023
d88db6d
cleanup
r3z4r Aug 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
56 changes: 18 additions & 38 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,29 @@
# Sheypoor frontend-challenge
# User Account Creation Wizard

The task is to implement a **2 step UI wizard** to create a user account. There is no UX or UI constraints, this is
up to you to decide.
This project is a 2-step UI wizard to create a user account. It collects user information in two steps: Personal Information and Profile Information. The user is required to provide their name, age, email, and newsletter preferences.

The User information that we need to collect is described in the User type:
```
interface User {
name: string
age: number
email: string
newsletter: 'daily' | 'weekly' | 'monthly'
}
```
You can, for example collect the name and age in the first step and then email and newsletter in the second step.
You may use a routing library such that every step is a separate route but this is completely optional and not
required.
## Showcase

There is a dummy `sdk` package(implemented in the /sdk folder) which exports a `createUser` function. This function returns a `Promise`.
Use it to simulate a request that creates a user account.
Ex:
You can view the live demo of the application [here](https://lustrous-sfogliatella-9e25db.netlify.app/).

```
import { createUser } from 'sdk'
## How to Run

const details = {...}
To run the project locally, follow these steps:

createUser(details).then( ... )
```
1. Clone the repository: `git clone https://github.com/r3z4r/frontend-challenge`
2. Install dependencies: `npm install`
3. Start the development server: `npm start`
4. Open the application in your browser at `http://localhost:3000`

The focus should be on code style and the way you approach the problem implementation wise.
Feel free to use any other helper library although ideally the more code you write yourself the better.
## How to Build

### Implementation requirements:
To build the production version of the application, run the following command:
`npm run build`

- use either vanilla Javascript or one of the frameworks we use at Sheypoor(React / Knockout.js) or whatever you like
- use npm to manage dependencies, there is pre-initialized package.json included in this repo
The optimized build will be available in the `dist` folder.

### Getting started:
## Technologies Used

- Fork the repo
- Implement your solution
- Create a PR against this repo

Optional: build the project and deploy (ie make it available as a static project) on
[Github Pages](https://pages.github.com/), otherwise please provide detailed instructions
on how to start the project locally.

Any questions please contact us via email (jobs AT sheypoor.com) :)
- React
- React Router
- Tailwind CSS
395 changes: 395 additions & 0 deletions dist/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 11 additions & 0 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>2-Step User Wizard</title>
<script defer src="/bundle.js"></script></head>
<body>
<div id="root"></div>
</body>
</html>
Loading