Interactive photo art studio with HTML/CSS/JS/jQuery/NodeJS/Angular/bootstrap



-This is a small web site/online studio for creating personal artwork from different photos stored in root folder. We need you to build ONLY THE FRONT END part of the project. No backend work is necessary. Here is the mock design attached according to the flow of the site by image numbers. The site should be designed with pure client side tools like HTML5, JavaScript, CSS and any other JS libraries/framework angular, jQuery, bootstrap, or NodeJS. Here are the overall functionality:

1. The home page would have different images displayed as banners organized in different rows. A particular row can be made of 1/2/3 images based on the width of the images. It would load all images automatically that found in a folder called config/home_page

2. Once you click "Spell Your Word" button from home page second page should load transparently to the user without refreshing the entire page. On this page user can choose different images for each letter and signs by clicking on them. If I press A then all A related letters should load, If I click on D all D images should load and so on. If color tab is selected then color images would load for the same letter, same goes for sepia. Users would drag and drop an image from top panel to bottom panel in order to spell a word. Bottom panel has add/remove word buttons. By pressing add user can add blank space between words to spell multiple words and remove would simply remote the last word. Every image item needs to have minimum 4 properties

a) Itemid b) variationid c) price d) item_path.

Upon loading images you have to populate these fields and pass to the next screen for price calculation and inventory update.

3. Once user happy with the words they spelled, they move on to framing. Frame screen loads the words in two different options. First one is Lego display, where you display the images in various fashion. The second one is regular horizontal one frame display with a gap between each image. The key thing here is all these images and frames have to be displayed according to what user chose in the previous screen and carry over to this screen and programmatically blend with framing images to give complete finished look. Image blending and processing technique would be necessary to display them on the fly along with calculating price.

4. Then users moves on the checkout page. There would be two payment options paypal/credit card. Once customer hit pay button it would should submit the itemid, variation id, price, quantity, for the selected items to the next contact us screen. Only paypal integration is necessary no CC Payment integration is not necessary at this point.

5. Last screen is contact us which might have order info if and order is submitter otherwise a clean from to send us message.

- Only other thing is you have to do the social media plugin integration that each page has in the design. Again, that is just using JS from client side. We don’t have to save those social media data anywhere.

-We want very simple CLEAN design, no flashy stuff or server side coding is required. Site should be very interactive and fast. The site should have a transparent background image that could serve as a wrapper image for all the pages. We will provide sample images that you could use to make a wrapper image.

-PAGES CAN’T HAVE SCROLL BARS. All display should be compact and dynamically proportioned to fit the screen. Remember, this is a custom artwork design tool not a regular website or blog.

That's all pretty much, we will walk you through again and discuss the functionality details to address the question you might have. Let’s get the ball rolling and can’t wait to see your great work!



the job requires graphics design including font, color, theme, background images as well as firebase integration to get images and payment integration . Here are the details tasks breakdown for milestones:

Here is the milestone breakdown:
1. Project setup/boilerplate
o React project setup (toolchain/build)
o Major dependencies added (Redux data store, react-router)
o 5x page frame components contained in responsive outer frame component
o react-router page-to-page routing
o 1 days
2. Home page
o Banner components (variable size with placeholder images)
o Social media component (nonfunctional)
o Navigation to Studio screen
o Place holder modal for contact us modal component
- make a test deploy to firebase at this point to make sure there is no issue.
o 1 day
3. Studio page
o Letter selection component
o Symbol selection component
o Outer letter selector component
o Color selection component
o Place holder letter images
o Navigation to Frame page
o 3 days
4. Framing Page
o Back side view toggle
o Side purchase components (place holder interaction)
o Lego view component
o Horizontal view component
o 2 days
5. Order review
o Place holder integration
o Basic business rules in component
o Validation
o 1 days
6. Order Confirmation
o Place holder interactions
o Contact us components
o 1 day
7. Home page (functional)
o Request banners from Firebase api
o Dynamically size banners
o Social network button integration
o 1 day
8. Studio page (functional)
o Pull available images (with price, item id, variation info) from Firebase, cache in Redux data store
o Image selection integrated with Redux store (basis of purchase)
o Add composed word with options as order to Redux store
o 1 day
9. Framing page (functional)
o Pull prices from Firebase (selected images and calculate price, no additional firebase call necessary)
o Integration with Redux store (add items to order)
o Social media integration
o 2 days
10. Order review (functional)
o Population of order information
o Integration with redux store
o Integration with PayPal / order submission
o 2 days
11. Order confirmation (functional)
o Integration with redux store
o Retrieved order information (Firebase integration) (no call necessary firebase won’t keep any ordering info, order info would be available based on the cart from previous screen).
o Firebase integration contact us (will send an email message directly to sales@photospellgifts.com from the client side)
o 1 day
12. Integration of graphic assets (with any modification, testing and bug fixing)
1. 3 days

Ferdigheter: Angular.js, HTML5, Bildediagnostikk, jQuery / Prototype, Nettsidedesign

Se mer: bootstrap html5 css jquery, nodejs, angular js, nodejs angular js, html, angular.js, photo art studio online editing, drupal easy website build, alibaba website build, handicapping website build service design, joomla commerce website build, open source css photo albums, css photo slideshow, photo art wall street journal, full website build, css photo php, copy exitsing website build site, css photo gallery mysql, css photo album source code, css photo gallery captions, drag drop website build bracelet

Om arbeidsgiveren:
( 3 omtaler ) Boston, United States

Prosjekt-ID: #14235376

34 frilansere byr i snitt $1468 for denne jobben


Let's discuss more about project to finalise the proper scope with estimated cost and time so ping me over the freelancer chat.....I will share some demo as well for recent works if you want to check. Relevant Skills Mer

$1469 USD på 20 dager
(83 Omtaler)

Hi, We have strong Skills of NodeJs and other skills that you have mentioned. I have reviewed your project in detail, however, can't provide feedback due to limited words in this field. Relevant Skills and Experience Mer

$1250 USD på 20 dager
(113 Omtaler)

Hi, we are a London(Shoreditch) based design studio, Please get in touch to discuss further. Following are some of our recent design projects; UX / UI designing and branding for a task provider platform Mer

$1500 USD på 30 dager
(49 Omtaler)

Hi! I've seen your requirements and I'm interested in it, I have expertise in PHP (cakephp,CI,Zend) and Clientside (jQuery, Angularjs, Angular2, Typescript) and have highest reviews for jQuery (frontend) at freelancer Mer

$1125 USD på 10 dager
(102 Omtaler)
$1200 USD på 25 dager
(152 Omtaler)

Hi We can discuss pricing over chat.I read your project description I got 100% in php and wordpress and HTML freelancer certification exams it shows my knowledge and experience. For detailed Discussion please Mer

$1250 USD på 20 dager
(161 Omtaler)

Hello! I have got acquainted with your requirements and have a proposal as well as some questions that we should discuss. The price and timeline are negotiable. We will agree on final estimation after discussio Mer

$2000 USD på 30 dager
(38 Omtaler)
$1250 USD på 20 dager
(48 Omtaler)

Hey SolutionJet Team, Let me keep this really short as I am sure you would be swamped with the proposals! We have been developing/maintaining web applications in AngularJS and various JavaScript libraries/framewo Mer

$1111 USD på 30 dager
(19 Omtaler)
$1250 USD på 20 dager
(28 Omtaler)
$1500 USD på 20 dager
(42 Omtaler)

Hello, Greetings!! I have built various big websites. Please check [login to view URL] (marketplace) my inhouse product. Also check [login to view URL] Please share requirement and initiate a discussion s Mer

$1250 USD på 20 dager
(40 Omtaler)

Happy bidding. I’ve carefully gone through your job posting on “Interactive photo art studio with HTML/CSS/JS/jQuery/NodeJS/Angular/bootstrap”. I have 5+ years of the web with node.js and angular.js, so I am confiden Mer

$1500 USD på 20 dager
(23 Omtaler)
$1250 USD på 30 dager
(29 Omtaler)
$1500 USD på 30 dager
(21 Omtaler)

Dear Client, I am Vishal here, I have gone through your mentioned requirement and attached design for related section of website and I am having 5+ years of experience in Web Development/Designing. Relevant Skills and Mer

$1250 USD på 20 dager
(11 Omtaler)

We are a team of young and enthusiastic Web and Mobile developers having 5+ years experience,good knowledge and expertise in Java Script,AngularJS,Node Js and MongoDB. Relevant Skills and Experience Kindly review our Mer

$1000 USD på 20 dager
(45 Omtaler)

Hi there, Thank you for inviting us to bid on your requirement. We are a team of technocrats having 8+ years of experience in Web and Mobile design plus development. Talking about our expertise, we possess very g Mer

$1400 USD på 20 dager
(19 Omtaler)
$1250 USD på 20 dager
(31 Omtaler)
$1500 USD på 10 dager
(40 Omtaler)