React ready web first UI. Bootstrap or Material-UI.

Job ID: 36676030

Budget: €30 – €250 EUR

I am looking for a React ready web first UI for my project. I am open to using either Bootstrap or Material-UI.

Nothing fancy as its just to start working with developing code.

Its all quote conventional, page 3 is probably the most interesting.

At this stage only flow functionality is required.
Menu–
Not login in – Directory,
Logged in – Profile, Directory, Interests, Events. Help. Tos, PP

1. Homepage: Register or login buttons via Facebook, Google, Twitter or iOS. Check box to accept tos and link to it and the pp.

2. User Profile Page/settings: The usual personal information, and account management tools.
Edit icon – upload picture.
Username
Year of birth – drop down.
Edit default location – link to generate google map for location selection.
Default interest range – X miles/km’s
Gender – m/f/other
Reset password
Email

3. Interest Directory Page:
Interests are organised as a tree/hierarchical structure that could theoretically be of infinite nodes, each further refining the nature of the interest (eg. Sport – Tennis- Doubles – Mixed Doubles-Under 18 etc). They will be displayed in 3 parts, Parent, current and children.
Display will be vertical, top is parent (1 row), then below it is current (1 row) and then at the bottom are all children (10 rows – I like the idea of being able to mouse drag the list up and down if its longer than 10 rows. Each element will likely have several children.
Click parent or a child to make it current.
Click current to load the interest page (4) for that group.

New interest suggestion tool that allows users to suggest where to place their new interest in the tree. “Suggest new interest here”. This applies to the current interest so the suggestion will be added as its child.

Search tool


4. Interest page: a feed of that interest’s content, (posts, feelers and events). The UI should have a widget for each.

Interest Subscription tool with:
i) location option – links to google map pop up.
ii) Report tool – pop up with options of reasons for the report.
iii) Create post….simple, just text and media for now. Fb style. Posts have a fb style comments facility.

5. Events – 3 tabs
i) “Events for me” (default): event widget.
ii) “My Events” - event widget - events owned by user – Create/Edit an event”. Event name, description, date, time, organiser/owner, costs and location (google map pop up) can be added or modified here.
iii) “Event Feeler”. A simple post (text, media same as used on the interests page) to see if there is interest in a specific event before the host commits to organising it. This will be a normal post but will be highlighted in the interests page as a “Event Feeler”

6. 3 empty pages. FAQ/Help Page, Privacy Policy and Terms of Service.
Related categories: Website Design React.js UI / User Interface