Coding challenge where you build a Raffle App client that interact with a RESTful API using React (Web) or Using Swift (Mobile)
- Node.js account
- Knowledge or JavaScript and React
- Xcode installed
- Knowledge of Swift
- Create a new React App.
- You may use
create-react-app
- You may use
- Create a new Swift Xcode Project for your app.
- Complete your client application according to the Technical requirements below.
Create a client for a Raffle application. Users are able to:
- Create raffles
- List all raffles
- Add participants users to raffles
- Draw a winner from a raffle, etc.
Notes:
- You may use any 3rd-party libraries or packages for functionality or styling.
- Web We recommend you use something like Bootstrap or Material UI or others to style you app.
- Mobile You must write your networking layer natively, do not use Alamofire or equivalents for Network Requests.
Use the details and endpoints of the API below to accomplish the Raffle App functionality. This API accepts and returns JSON payloads.
Root Endpoint: https://raffle-be.herokuapp.com
| Method | Endpoint | Description | Example JSON Body Payload |
|---|---|---|---|
GET |
/api/raffles |
List all raffles | n/a |
POST |
/api/raffles |
Create a raffle | { "name": "My first Raffle", "secret_token": "s3CrE7" } |
GET |
/api/raffles/:id |
Retrieve a raffle by id | n/a |
GET |
/api/raffles/:id/participants |
Retrieve all participants of a raffle | n/a |
POST |
/api/raffles/:id/participants |
Sign up a participant for a raffle | { "firstname": "Jane", "lastname": "Doe", "email": "[email protected]", "phone": "+1 (917) 555-1234", } |
PUT |
/api/raffles/:id/winner |
Pick a winner from the participants at random for a raffle | { "secret_token": "s3CrE7" } |
GET |
/api/raffles/:id/winner |
Retrieve the winner of a raffle |
- A
secret_tokenmust be provided when creating a raffle. This token can be any random string and will be used when picking a winner for the raffle. Only if the creation token matches the one in the PUT request to pick a winner the raffle will be performed and a winner will be awarded. - When adding a participant to a raffle all fields are required but
phone
Your application doesn't have to look exactly as the wireframes below, however it should have all the main components, accomplish all the functionality and be visually pleasing.
Your Raffle App should have the following pages or views (mobile) (and be displayed at their respective browser url [Web only]).
Display a form to add a new raffle with name and token fields and a submit button. Show a success message upon successful raffle creation and an error message otherwise.
Should also display a list of all raffles and when you click in one of the raffles of the list it should take the user to that raffle's page/view.
Displays a nav bar or navigation menu that would take the user to All Raffles, Participants and Pick Winner pages/views.
Below the navbar display a form to add a new participant to the Raffle. The form must include First Name, Last Name, Email and Phone inputs. The phone input should be optional and all others required. Include two buttons one to submit and another to reset the form.
Display the total number of participants and a list of all users and their information.
Displays a form where a user (the raffle admin) can input their secret token and pick a winner at random for the raffle. If a winner has already been picked this page/view should display a card with the user information and a celebratory image and never show the form again.
- We think this challenge would take ~10 hours to complete, so allocate your time appropriately.
- You must submit your solution no later than Tuesday January 17th @ 10:00am
- Include a README.md file with instructions on how to run your project.
- Submit your code compressed in a zip file using the submission form
- Web make sure to remove your
node_modules/folder before compressing
- Web make sure to remove your
- For any questions reach out to @Billy Taggart in the Pursuit Core Workspace