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

Cancelled Posted 6 years ago Paid on delivery
Cancelled Paid on delivery

ONLY VERY PROFESSIONAL CANDIDATES. PLEASE READ THE JOB DESCRIPTION BEFORE APPLYING. THIS IS NOT A PHP/LAMP PROJECT! Strong JS framework and REST API understanding needed!

------------------------------------------------------------------------------

-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!

Cheers,

SolutionJet

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

AngularJS HTML5 Imaging jQuery / Prototype Website Design

Project ID: #14235376

About the project

32 proposals Remote project Active 6 years ago

32 freelancers are bidding on average $1394 for this job

meet2amitvw

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 More

$1469 USD in 20 days
(90 Reviews)
9.2
opencollar

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 More

$1250 USD in 20 days
(139 Reviews)
9.0
zainy01

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 More

$1125 USD in 10 days
(102 Reviews)
7.6
CoderCrew

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 More

$1250 USD in 20 days
(267 Reviews)
7.5
pixelagency1

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 More

$2000 USD in 30 days
(49 Reviews)
7.6
cobol1962

Hello. I am thinking that i figured out your idea. But i am also thinking that this job can be done much more simplier. I have expirience with image and text manipulation. Relevant Skills and Experience I am very expi More

$1111 USD in 20 days
(41 Reviews)
5.4
silverwizard

Hello, I have enough experience to help you. Req-s are clear, of course need calls about. I have the team that can help and speed up the development. Let's discuss details. - Volodymyr Relevant Skills and Experience H More

$1500 USD in 15 days
(0 Reviews)
4.6
ouzmetu

As KUTU Design, we would like to work with you in this project. We can make a sample for you free of charge. You can see our previous work via our Freelancer portfolio. Relevant Skills and Experience Please let us kno More

$1250 USD in 20 days
(0 Reviews)
0.0
tracygearth

hello, My experience would give you a creative virtual studio and technology I would take care. thanks for providing detailed specification. Give me a try. Regards,

$907 USD in 20 days
(2 Reviews)
2.2
vinodhkumar2016

hi this is vinodh. I have a years experience in AngularJs. I done lot of projects in individual . so many clients also apreciate to me.

$1111 USD in 20 days
(0 Reviews)
0.0
cozzbie

All desired will be delivered in project time. Relevant Skills and Experience Over 15 years building web apps in .NET, PHP, AngularJS, NodeJS and MongoDB Proposed Milestones $1000 USD - Project delivery Additional S More

$1000 USD in 10 days
(0 Reviews)
0.0
jstechalliance

Create Front end for small web site/online studio (5 pages), reviewed attachment for more details. Relevant Skills and Experience HTML, CSS, JS, jQuery, NodeJS, Angular, bootstrap, UI/UX design . Proposed Milestones More

$1000 USD in 14 days
(0 Reviews)
0.0