Thanks for working with us on ResultJam!
Millions of people purchase online educational content like courses and trainings, yet only a small percentage of those customers take meaningful action and get results from their investment.
Content creators don't know how their students are doing, where they're stuck or how effective their content really is.
ResultJam is a new approach to online education that allows students to see each others' progress towards a clearly defined, desired outcome. It shows course creators exactly how students are doing and where they're getting stuck.
We are creating an outcome generation platform that uses a clear, repeatable methodology to improve student engagement and success, raising the bar for the entire online education industry.
For this task you'll use Svelte + TailwindCSS to layout desktop & mobile designs of ResultJam's user profile page. (Figma link will be provided)
Get as much done as you can in 5 hours. Get in touch if you have any questions or need clarification.
To get started, simply run:
yarn
yarn dev
To help you iterate faster, this intro repo is using bleeding edge tech, SvelteKit (https://github.com/sveltejs/kit) and Tailwind JIT (https://github.com/tailwindlabs/tailwindcss-jit), but if you have any problems, reach out on Moonlight.
If using VSCode, we'd prefer if you install Headwind to keep Tailwind classes sorted.
I've laid out some basic structure so you don't have to waste time getting started
/src/routes/index.svelte lists some sample users. You can click to either slide up the profile component in a sheet view, or to navigate to a dedicated user profile page.
/src/lib/board.js has sample data you can use
/src/components/UserProfile.svelte is probably where you'll do most of your work, but feel free to break things into as many components as seems clean to you
If you don't have data for a specific element, just use dummy content. This includes:
- User location / about text
- Behavior/Metrics section - dummy or random values are fine
- Images in "Completed Step Timeline", you can just use a colored div placeholder or random unsplash images